Problem changing tooltip css in Joomla 3

Question

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. I want to give a background-color to the tooltip.

Answer 1

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:

Answer 2

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.