1

I'm trying to change the css properties of the tooltip css in Joomla 3.9. That is, when you hover over a text-label and a description appears right to it. I can't find the corresponding css class, not even with "force state: hover" in the browsers inspector tools. Does anyone know how to do it?

Edit: Please see this image.

The mouse hovers over label "Name *" and tooltip appears on the right

The mouse hovers over label "Name *" and Tooltip appears on the right. I want to give a background-color to the tooltip.

Improve this question
3
  • I edited my initial question.
    – Benjamin Röhling
    Feb 7, 2019 at 4:02
  • Where are you that you don't have the classic tooltip graphic? imgur.com/a/xDptjFs Can you show us how to recreate your issue? Also, please take the tour.
    – mickmackusa
    Feb 7, 2019 at 4:14
  • I took the tour. My template comes from a template generator. It was like this when I installed it. I would like to know what class the tooltip uses so that I can rewrite that class but 1) the tooltip class isn't shown in my inspector because it's a :hover pseudo-class. 2) forcing :hover state "on" in the inspector doesn't work.
    – Benjamin Röhling
    Feb 7, 2019 at 4:25

2 Answers 2

Reset to default
2

The problem was: The Tooltip didn't have the styling I wanted. The quest was: To know the tooltip css class to be able to alter it. The solution: I googled the internet for the tooltip css class (the jquery suggestion didn't work for me) and altered the .popover class (tooltip) so that it looks the way I wanted.

CSS added: to templates/$template_name$/style.css

.popover {
    background-color: white;
    border: 2px solid #A10C27;
    border-radius: 5px;
    padding: 5px;
    width: 500px;
}

Resulting Image on the Website:

enter image description here

Improve this answer
0
1

The base HTML generated by Bootstrap tooltips looks like this:

<div class="tooltip">
    <div class="tooltip-arrow"></div>
    <div class="tooltip-inner"></div>
</div>

Once triggered, outer div also receives position classes (top, bottom, left or right) as well as fade and in:

<div class="tooltip fade top in">
    <div class="tooltip-arrow"></div>
    <div class="tooltip-inner">Tooltip Text</div>
</div>

I can't find the corresponding css class, not even with "force state: hover" in the browsers inspector tools.

Changing state in inspector does not trigger JavaScript. Instead, you can enter this into console to show the tooltip:

jQuery('#example').tooltip('show');

Where #example is the selector of the element containing the tooltip. When you run this code, the tooltip will be generated and its markup will appear in inspector.

Improve this answer
1
  • The ID and the Class jQuery('#jform_title-lbl').tooltip('show'); and jQuery('.hasPopover.required').tooltip('show'); don't get what I want. The Popover doesn't show up.
    – Benjamin Röhling
    Feb 7, 2019 at 11:05

Your Answer

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

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