- This topic has 5 replies, 2 voices, and was last updated 4 years, 6 months ago by .
Viewing 6 posts - 1 through 6 (of 6 total)
Viewing 6 posts - 1 through 6 (of 6 total)
- You must be logged in to reply to this topic.
Home › Forums › All Other Themes › CSS for mobile responsive tooltips?
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;
}
Hi,
Your website is on under construction mode. Therefore we are unable to check the issue.
Regards,
Brad
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
Hi,
Issue have been resolved. Kindly check and confirm.
Regards,
Brad
Thanks, yes the mobile tool tips are now working. Many thanks
peace
🙂
Best Food Website Templates & Themes for Your Restaurant Are you a foodie or do you want to start a restaurant or something related to […]
Find the Perfect Premium Directory Listing WordPress Themes and Templates Are you searching for the best directory listing WordPress themes? You’re in the right place. […]
Are you a beauty professional or hair extension specialist? This post highlights the best WordPress themes for hair extensions, designed for salons, beauty brands, and […]