Home › Forums › All Other Themes › CSS for mobile responsive tooltips?
- This topic has 5 replies, 2 voices, and was last updated 3 years, 6 months ago by
Sonnal S Sinha.
-
AuthorPosts
-
April 29, 2020 at 8:20 pm #150705
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;
}April 30, 2020 at 5:16 am #150726Hi,
Your website is on under construction mode. Therefore we are unable to check the issue.
Regards,
BradApril 30, 2020 at 11:17 am #150798I 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
May 1, 2020 at 8:19 am #150894Hi,
Issue have been resolved. Kindly check and confirm.
Regards,
BradMay 1, 2020 at 3:33 pm #150926Thanks, yes the mobile tool tips are now working. Many thanks
peace
May 4, 2020 at 11:13 am #151005🙂
-
AuthorPosts
- You must be logged in to reply to this topic.