Archived topic
info icon eg. fa-info-circle hover displays styled (css html) tooltip
7 replies · Started by david on June 23, 2021
Hi I would like to use an info icon that when hovered over displays a styled tooltip eg.
Terms used (see Glossary) are an interpretation of activity only. They have not been validated for this website and are <b>NOT</b> intended as scientific evidence or recommendation for use. (See also DISCLAIMER)
After alot of googling I can find only plain text tooltips.
Can you suggest a solution that combines icon and styled tooltip
the example below is using a tooltip plugin and font awesome for the icon.
Thanks for any help
Hi there,
what plugin are you using to create the tool tip ? As its specifically adding the necessary data attributes for the tooltip to your text
Hi David,
Thanks for getting back to me.
I'm using WordPress Tooltips plugin https://da.wordpress.org/plugins/wordpress-tooltips/.
I've set it up this way (with the icon next to it) 'cause I don't see a way to attach the tooltip with the icon, but would like the tooltip to appear when I hover over icon (not the text).
Thanks for your help
So that plugin uses a shortcode to wrap around your text. Can't you wrap the icon in the shortcode?
eg.
[the_plugin_shorcode...]<i class="fas fa-info-circle fa-info-icon "></i>[/the_pluin_shortcode]
You're probably right, but I'm can't get it to work.
This is what I have at the moment:
<th>
[icon name="info-circle" style="solid" class="info-icon"]
[tooltips keyword="Activity / Interpretation" content="Terms used (<a href='https://florapal.org/glossary2/#activity 'target='_blank'>see Glossary</a>) are an interpretation of activity only. They have not been validated for this website and are <b>NOT</b> intended as scientific evidence or recommendation for use. (See also <a href='https://florapal.org/disclaimer/ 'target='_blank'>DISCLAIMER</a>)"]
</th>
How exactly do I wrap the icon in the shortcode?
Thanks for your help
See here:
https://tooltips.org/how-to-use-wordpress-tooltip-shortcode-tooltips-to-add-tooltips-manually/
Under the heading: How to use WordPress Tooltip Shortcode to Create Icon Tooltip?
You will see they provide a open / close shortcode option like the example i provided.
Thank very much David - Perfect!
Can't tell you how long I've been banging my head on the wall. It's all about having someone to talk to and thinking outside your box.
What about creating a new plugin "Talk to Me" that's like this forum, but separate from GeneratePress.
Haha - yes, i find myself needing those extra pair of ears and eyes when the head banging begins!
Glad to be of help.
