I'm trying to display a tool tip when you have your mouse over to the menu item " blog ".

My tooltip, content in the menu is this:

< li id="newitem91">< div class="tool-tip">< span>tool tip!< /span>< /div>< /li>

and the CSS class to display it is this , but it does not work

#fx-item1455:hover +#newitem91 {display:block !important;}

What could be the problem? Conflict with joomla css?

Thanks for any help :)

  • Is it a custom tooltip or the defaukt Bootstrap 2.x one that comes shipped with Joomla?
    – Lodder
    Sep 21, 2016 at 10:03
  • it's a custom tooltip
    – Gabriel91
    Sep 21, 2016 at 10:04
  • 1
    .tool-tip { display:none; } #newitem91:hover .tool-tip { display:block; } perhaps?
    – Lodder
    Sep 21, 2016 at 10:07
  • But i would that when i go on button blog that has id="fx-item1455" appear the tooltip. I tried a bit of everything with css but always without result
    – Gabriel91
    Sep 21, 2016 at 10:11
  • This question is not completely clear. Please add more of the html markup so that we can reproduce the issue. That + looks suspicious. Please progress this question toward resolution. Aug 8, 2019 at 8:44

1 Answer 1


Did you try:

.tool-tip { display:none; } 

#newitem91:hover > .tool-tip { display:block; }

I hope this helps

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.