<![CDATA[Tooltip on hover]]>Hi,

I try to implement a tooltip using CSS. I've used the example providend by W3School (https://www.w3schools.com/howto/howto_css_tooltip.asp)

I've a div with icones on the left of my page :
Capture d’écran 2022-03-12 à 19.08.04.png
In the page builder, it seem to work fine.
Unfortunately, when published, It changes my div size and diplays only in the menu div and not on top of the page.
Capture d’écran 2022-03-12 à 19.10.46.png

Here is my CSS :
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted #ccc;
color: #006080;
}

.tooltip .tooltiptext {
    visibility: hidden;
    position: absolute;
    width: 120px;
    background-color: #555;
    color: #FFF;
    text-align: center;
    font-size: 16px;
    padding: 5px 0;
    margin: 0 10px;
    border-radius: 6px;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
    content: " ";
    position: absolute;
    top: 50%;
    right: 100%;
    /* To the left of the tooltip */
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent #555 transparent transparent;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

.tooltip-right {
    top: -5px;
    left: 125%;
}

.tooltip-right::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 100%;
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent #555 transparent transparent;
}

And here is my HTML
<div class="tooltip ui-draggable-handle resizable-elem" style="text-align: center; color: rgb(242, 241, 253); font-size: 24px; border-bottom: 2px solid rgba(242, 241, 253, 0.5); margin-bottom: 10px !important; margin-top: 0px !important; padding: 0px 0px 10px !important; margin-left: 0px !important;" fs-d="24" link-target="page" link-local="Theme" margin-desktop-bottom="10" padding-desktop-top="0" padding-desktop-bottom="10" padding-desktop-left="0" padding-desktop-right="0" margin-desktop-left="0" link-anchor="Sophologie" local-anchor="&id=2"><i icon="far fa-bullseye-pointer" icon-rotation="" icon-animation="" class="appdrag-icon far fa-bullseye-pointer"></i>
<span class="tooltiptext">Tooltip text</span>
</div>

Any idea ? Ive tried to change the z-index value... not working

]]>https://community.appdrag.com/topic/1049/tooltip-on-hoverRSS for NodeFri, 10 Jul 2026 17:21:35 GMTSat, 12 Mar 2022 18:13:13 GMT60<![CDATA[Reply to Tooltip on hover on Sun, 13 Mar 2022 09:18:17 GMT]]>@joseph-benguira Ok... Other solution... change your tooltip design 🙂 instead of positioning right... Positioning bottom works fine... Not so good looking... But works fine

]]>https://community.appdrag.com/post/4145https://community.appdrag.com/post/4145Sun, 13 Mar 2022 09:18:17 GMT<![CDATA[Reply to Tooltip on hover on Sun, 13 Mar 2022 06:59:55 GMT]]>@joseph-benguira Hi joseph... I got it... I'll try.

]]>https://community.appdrag.com/post/4144https://community.appdrag.com/post/4144Sun, 13 Mar 2022 06:59:55 GMT<![CDATA[Reply to Tooltip on hover on Sun, 13 Mar 2022 06:23:28 GMT]]>Hey @olivier-magnin,
since you have a left column which is a different section it won't work
what you can do instead is to place your tooltip directly in the BODY tag, you can add it dynamically with JS like this

$("body").append(`<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>`)

you'll need to adapt your css to position it correctly ...

Another option, don't use a vertical section left menu 😉

]]>https://community.appdrag.com/post/4143https://community.appdrag.com/post/4143Sun, 13 Mar 2022 06:23:28 GMT