web-dev-qa-db-fra.com

Problème pour changer les info-bulles CSS dans Joomla 3

J'essaie de changer les propriétés css des info-bulles css dans Joomla 3.9. Autrement dit, lorsque vous survolez une étiquette de texte et qu'une description y apparaît directement. Je ne trouve pas la classe css correspondante, pas même avec "force state: hover" dans les outils d'inspection des navigateurs. Est-ce que quelqu'un sait comment le faire?

Edit: Veuillez voir cette image.

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

La souris survole l'étiquette "Nom *" et une info-bulle apparaît sur la droite. Je veux donner une couleur d'arrière-plan à l'infobulle.

cssjoomla-3.9
1
Benjamin Röhling

Le problème était: l'infobulle n'avait pas le style que je voulais. La quête était: Connaître la classe CSS info-bulle pour pouvoir la modifier. La solution: j'ai fait une recherche sur Internet pour la classe CSS info-bulle (la suggestion jquery ne fonctionnait pas pour moi) et j'ai modifié le .popover classe (info-bulle) pour qu'elle ressemble à ce que je voulais.

CSS ajouté: aux modèles/$ template_name $/style.css

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

Image résultante sur le site Web:

enter image description here

2
Benjamin Röhling

Le HTML de base généré par Bootstrap info-bulles ressemble à ceci:

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

Une fois déclenché, le div externe reçoit également les classes de position (top, bottom, left ou right) ainsi que fade et in:

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

Je ne trouve pas la classe css correspondante, pas même avec "force state: hover" dans les outils d'inspection des navigateurs.

Le changement d'état dans l'inspecteur ne déclenche pas JavaScript. Au lieu de cela, vous pouvez entrer cela dans la console pour afficher l'info-bulle:

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

Où #example est le sélecteur de l'élément contenant l'info-bulle. Lorsque vous exécutez ce code, l'info-bulle sera générée et son balisage apparaîtra dans l'inspecteur.

1
Sharky