Search code examples
joomlatooltip

What is the DOM structure of tooltips in Joomla 3?

I am using a form in a front-end view of my website. The labels of the input fields show hints/tooltips when hovering over them with the mouse. I would like to style these tooltips with the css of my front-end template. Therefore I need to know the DOM structure of these tooltips.

Somehow, I can not find any documentation about this and using 'Inspect element' in Google Chrome also doesn't help me, because the tooltip is removed as soon as I do not hover the label anymore while trying to inspect them.

Help is very much appreciated!

Solution

  • Default tooltips in joomla back office have this structure, I'm pretty sure that it is the same in front office : 

    <div class="popover fade right in">
    <div class="arrow"></div>
    <h3 class="popover-title">[TITLE]</h3>
    <div class="popover-content">[TEXT]</div>
</div>