CSS for mobile responsive tooltips?

[Rachel]

Hi, I’m using Design Agency theme in Elementor & have added some CSS & HTML to get tool tips to appear on certain words for definitions. My problem is that I can set the position of the tool tip fine for the desktop & tablet view but it’s off screen for the mobile view. Can I set a different position only for mobile responsive?

The code I’m using follows;

HTML//

<div>Add Some Text Here
<div class=”tooltip”> Hover over me
<span class=”tooltiptext”> Tooltip text </span>
</div>
Add some text here too</div>

CSS//

.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
cursor:help;
}

.tooltip .tooltiptext {
visibility: hidden;
width: 500%;
background-color: blue;
color: #fff;
border-radius: 6px;
padding: 5px 5px 5px ;
position: absolute;
z-index: 1;
top: 150%;
left: 50%;
margin-left: -250%;
}
.tooltip .tooltiptext::after {
content: “”;
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent blue transparent;
}

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

[Sonnal S Sinha]

Hi,

Your website is on under construction mode. Therefore we are unable to check the issue.

Regards,
Brad

[Rachel]

I have sent my login details to have a closer look. The page you should look at is: https://www.thenestsouthwark.org.uk/corona-virus-covid-19/

There are 2 tool tips coded in. One in the first paragraph ‘pandemic’ and one in the first Accordion section ‘fake news’.

Thanks

Kirk

[Sonnal S Sinha]

Hi,

Issue have been resolved. Kindly check and confirm.

Regards,
Brad

[Rachel]

Thanks, yes the mobile tool tips are now working. Many thanks

peace

[Sonnal S Sinha]

🙂

[Author]

Posts