[Resolved] How can I create a CSS only tool tip

[kyle]

I’m looking for the code for a CSS only tooltip function. Just to be clear by tooltip I mean when someone hovers over a particular work a popup box comes up with an explanation.

I have found code on google that works but also messes up other parts of my site.

Can anyone help?

Thnaks in advance

Kyle

[Leo]

Hi Kyle,

Can you provide a link to your site so we can see what you have so far?

Thanks!

[Tom]

Something like this might help: https://chrisbracco.com/a-simple-css-tooltip/

[kyle]

I just managed to sort it thank you both for you responses!

[Tom]

No problem 🙂

[Gillian]

Hi Tom

I used the CSS in the link you mentioned and have put it in the additional css for the moment. I get a warning against some of the code, for example,

filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);

has an ! beside it which gives

(<filter-function-list> | none) but found ‘progid: DXImageTransform.Microsoft.Alpha(Opacity=0)’

Is there something I should be doing about that? Thanks

[Tom]

Pretty sure that part is for old internet explorer versions. You can remove it if you don’t need to support them.

[Mihail]

Hello everyone!

Something like this might help: https://chrisbracco.com/a-simple-css-tooltip/

I tried using the above code for the GB button but nothing works…

Is it possible to make the code work with button GB?
Or maybe there is some other way to make a tooltip for the GB buttons?

Thanks for the answer 😉

[David]

Hi there,

you would need GenerateBlocks Pro, which provides the data-attribute options in the Button blocks settings.
If you have GB Pro then raise a support topic over at GenerateBlocks and we can advise. But it cannot be done with the free version.

[Mihail]

you would need GenerateBlocks Pro

It’s a pity. Well, thanks for that 🙂

[David]

Glad to be of help.

[Sasa Pajic]

Hi,

simply and works

https://theadminbar.com/creating-animated-tooltips-in-generateblocks/

[David]

Nice – thanks for sharing 🙂

[Author]

Posts