Jump to content

Tooltips in Nav icons using CSS

Recommended Posts

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-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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 ":


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:


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.

Link to comment
Share on other sites

  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...