Archived topic
How to create tool tips
6 replies · Started by Laura on July 8, 2022
I've read many posts here about tooltips but I'm still not sure how to go about it. I tried adding a simple paragraph in a Generate Blocks container, then adding data-tooltiip to the advanced custom attributes but no tooltip shows up.
Can you give me the steps to create an icon with a tooltip hover? I want a question mark icon, no text, and a tooltip with a message.
Thanks so much in advance.
I've also tried adding this in css:
/* Tooltip container */
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}
/* Tooltip text */
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* Position the tooltip text - see examples below! */
position: absolute;
z-index: 1;
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
visibility: visible;
}
And adding this in a classic paragraph block in source code:
<p class="tooltip">Hover over me <span class="tooltiptext">Tooltip text</span></p>
But nothing shows up on the page. Any ideas?
All of the tooltip plugins out there have issues...not being updated, security issues etc. I'd like to do it with css if I can. If you could let me know what I'm doing wrong I'd appreciate it!
Hi Laura,
Unfortunately this would require a custom solution and is out of the scope of this forum.
I just Googled "CSS Tooltips" and found lots of solutions though so perhaps one of them would work for you?
Hmmm. I've seen dozens of posts in this forum where people have asked about Tooltips with lots of help. Why is this different? I'm asking how to create a simple CSS tooltip on a Generate Press element. I've implemented a solution which within this forum another poster said worked and was simple. It's specifically Generate Press driven.
https://theadminbar.com/creating-animated-tooltips-in-generateblocks/
Why would there be no help for this?
In fact it was a post by David who pointed the poster to the Additional Attributes data-tooltips way to go about it. I just can't get it to work.
So I'm confused by your response that no help is available.
I see in one of the many posts about tooltips, David said to post it in the Generate Blocks forum rather than here. I'll move it over there.
Sounds good :)
