Tooltips in Nav icons using CSS

[Manuel Molina]

Is there a way to add a tooltip in nav icons?

I have Icons as navigation bar, but would like to add a tooltip in each for usability. 

This is my nav bar now...

 

 

This is the kind of tooltip I would like to have...

 

The CSS I am using for navigation icon is

.ipsNavBar_primary > ul > li#elNavSecondary_43 > a:before
{
  font-family: FontAwesome;
  font-size:20px;
  font-weight: normal;
  margin-right: 5px;
  content: "\f06e";
}

Is there anything I can dd there to have simple text on hover?

I doesn't have to be as nice as the example above, just need a simple text on icon hover.

Help appreciated.

[Jim M]

Thanks for posting!

Unfortunately, this issue is beyond the scope of our technical support. 👩‍💻

Our technical support is happy to help you with the Invision Community platform, but we're unable to help with things like server management, theme questions and modifications.

I've moved this to our Community Support area where other Invision Community owners will see it and help where they can.

[Nathan Explosion]

It's going to be easier if you post links to your site so people can view the page source instead of just a screenshot. Why? Because you've customised the theme, therefore suggestions people can provide may not work as you may have changed the html.

Anyway - based on the assumption that you haven't modified the template, then edit core -> front -> global -> navBarItems

Find (there are 2 instances of this, and the ... is there to indicate that there is more code on the 2 lines you will find):
 

<a href="{{if $item->link()}}...

Add the following after the opening "<a ":

title="{$item->title()}"

to make:

<a title="{$item->title()}" href="{{if $item->link()}}...

Save the template.

That's the basic title on hover.

If you want it a little different then add this too:

data-ipstooltip

to make:

<a title="{$item->title()}" data-ipstooltip href="{{if $item->link()}}...

Save the template.

Can you do this with CSS? Potentially, but as the 'title' is an attribute of an html element then it should be added in the html code, not using css.

[Nathan Explosion]

Looking good!!

[Manuel Molina]

3 hours ago, Nathan Explosion said:

Looking good!!

It's not only the Invision Community technology, it's the people around it that make it so spacial.

Thank you again, I appreciate the advice!

[Manuel Molina]

Here is the new version of icons using the thin family in the pro version of font awesome. Really like them. 

 

I am now trying to figure out the css for the