[Resolved] info icon eg. fa-info-circle hover displays styled (css html) tooltip

[david]

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

[David]

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

[david]

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

[David]

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]

[david]

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

[David]

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.

[david]

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.

[David]

Haha – yes, i find myself needing those extra pair of ears and eyes when the head banging begins!

Glad to be of help.

[Author]

Posts