Add Tooltip on Custom code

It seems that tooltips are not functioning as expected when applied in the custom code section of SOFTR. Could you please help me identify the issue? this is the example below

<!DOCTYPE html>
<html>
<head>
    <style>
        .tooltip {
            position: relative;
            display: inline-block;
        }

        .tooltip .tooltiptext {
            display: none;
            position: absolute;
            background-color: #333;
            color: #fff;
            padding: 10px;
            border-radius: 6px;
        }

        .tooltip:hover .tooltiptext {
            display: block;
        }
    </style>
</head>
<body>
    <div class="tooltip">Hover me
        <span class="tooltiptext">This is a tooltip</span>
    </div>
</body>
</html>


Hay @jadu,
can I ask you to change the class names as the .tooltip is being overridden and you can skip pasting the full HTML. All you need just:

<style>
        .custom-tooltip {
            position: relative;
            display: inline-block;
        }

        .custom-tooltip .custom-tooltiptext {
            display: none;
            position: absolute;
            background-color: #333;
            color: #fff;
            padding: 10px;
            border-radius: 6px;
        }

        .custom-tooltip:hover .custom-tooltiptext {
            display: block;
        }
    </style>
    <div class="custom-tooltip">Hover me
        <span class="custom-tooltiptext">This is a tooltip</span>
    </div>

Thank you very much!