1. MDB Home Page
  2. Support Main Page
  3. MDB Angular
Topic: Tooltip on Navbar

Ignacio Mariano Chiodo pro asked 6 years ago

Hello !I have a navbar where i use font awesome icons on the links, instead of writing some text like: About Us. I was trying to use tooltip, so when the user hovers the mouse over the icons/links, it show the word About Us. The problem is that in all the examples, it's used with <buttons> and not with <a> or <li> and when i adapted it to my code, it works, but only when the user makes click on the link, not on mouseover. Anyone knows if the tooltips are only ment to be used on <buttons> or how can i do for them to work properly on <a> or <li> Thank you very much!!

Damian Gemza staff answered 6 years ago

Hello Ignacio,

On my component it's works perfectly. If you want:

  • Add the tooltip on your's <a> element, you have to add mdbTooltip="Tooltip on bottom" placement="bottom" to <a> element. Hover mouse on your's <a> to see the tooltip.
  • Add the tooltip on your's <i> element, you have to add mdbTooltip="Tooltip on bottom" placement="bottom" to <i> element. Hover mouse on your's <i> to see the tooltip.
  • Add the tooltip on your's <li> element, you have to add mdbTooltip="Tooltip on bottom" placement="bottom" to <li> element. Hover mouse on your's <li> to see the tooltip.

Look at my example. In my code, i put bottom tooltip on <a> element:

<li class="nav-item active" >

<a class="nav-link waves-light"mdbTooltip="Tooltip on bottom"placement="bottom"mdbRippleRadius><iclass="fa fa-android"aria-hidden="true"></i></a>

</li>

Best Regards,

Damian

Ignacio Mariano Chiodo pro commented 6 years ago

Thank you very much for your answer, it was working OK, it was a problem with my computer!
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status

Resolved

Specification of the issue
  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags
About author
Ignacio Mariano Chiodo
Pro User 15Support score
5Questions 1Answers 0Snippets