[Resolved] how to style better font awesome title

[david]

Hi,
I have the following:

       <label for="name" class="control-label">[icon name="info-circle" style="solid" class="info-icon" unprefixed_class=""  title="This  information is neither comprehensive nor error free. If you have concerns about the toxicity of plants, contact the local Poison Control Centre in your area.   See also DISCLAIMER)"] Cautions</label>
Thanks

How can I style the title so it doesn’t appear as raw text on hover – ie. add size, background color ect

[David]

Hi there,

can you share a link and login details where i cans see the issue?

[david]

Hi David,
Thanks for your help here’s a page to see where the icon is used.

[David]

Tooltips are a browser thing – they cannot be directly styled.

The best you can do is to create your own tooltip CSS like this:

i {
  position: relative;

}

i[title]:hover::after {
  content: attr(title); /* Display title attribute */
  position: absolute;
  top: 0;
  right: 0;
  font-size: 14px;
  padding: 10px;
  background-color: #000;
  z-index: 1000;
}

But there are issues:

1. The positioning of the element – you may find table elements due to their table positioning will overlap the CSS Tooltip …. that would require messing with the relative positioning of table elements which may cause problems with their responsiveness…

2. It won’t remove the default browser tooltip – so that too will display, and trying to disable that requires Javascript and most methods remove the Title attribute which breaks the CSS option.
2.1 The only way to get around that is to use a separate attribute for your tooltip eg. data-title and use that in the CSS…. but removing the title attribute in any way is going to create an accesibility issue.

So sorry for long story – the short answer is: its a pain and can create problems. And you may have to resort to a plugin – see here:

https://torquemag.io/2014/08/7-effective-tooltip-plugins-wordpress/

[david]

Hi David, The link you sent is a little out of date, written 7 years ago and most of the tooltip plugins haven’t been updated in that time. Think the only relevant one is CM tooltips – trying that.

[David]

Yep – tooltip plugins do seem to have fallen by the wayside .. but CM products generally get really good reviews!

[david]

Hi, Once I understood that the info icon and the tooltip are 2 separate elements it made sense.
Used this.

    <th>
      [icon name="info-circle" style="solid" class="info-icon"]
      [tooltips keyword="Activity / Interpretation" content="the terms used as an interpretation of activity have not been validated and are NOT intended as scientific evidence or a recommendation for use. (See also: DISCLAIMER)"]
    </th>

Looks good.
Thanks for your help

[David]

Well thats great! Thanks for sharing.

[david]

Googling how to style tooltip content, I found this. Maybe helps somebody

[David]

Thats great – thanks for sharing

[Author]

Posts