web-dev-qa-db-fra.com

Remplacement des styles CSS du widget Info-bulle de l'interface utilisateur jQuery

J'utilise l'interface utilisateur jQuery Widget Infobulle

<li>
    <div class="i1">
        <a href="#inf-1"title="ΕΝΤΟΠΙΣΜΟΣ">
            <span class="ui-icon ui-icon-search"></span>
        </a>
    </div>
</li>
<li><a href="#inf-2"title="ΠΛΗΡΟΦΟΡΙΕΣ"><span class="ui-icon ui-icon-info"></span></a></li>
<li><a href="#inf-3"title="ΕΠΙΠΕΔΑ"><span class="ui-icon ui-icon-copy"></span></a></li>

et j'ai écrit le CSS suivant basé sur leur exemple et cela fonctionne comme un charme:

.tooltip {
    display:none;
    background: black;
    font-size:12px;
    height:10px;
    width:80px;
    padding:10px;
    color:#fff; 
    z-index: 99;
    bottom: 10px;
    border: 2px solid white;
/* for IE */
  filter:alpha(opacity=80);
  /* CSS3 standard */
  opacity:0.8;
}


Mais j'ai eu 3-4 info-bulles que je veux avoir différentes (comme l'exemple HTML ci-dessus) alors je les ai enveloppées dans une classe.

.i1 .tooltip  {
    display:none;
    background: red;
    font-size:12px;
    height:40px;
    width:80px;
    padding:20px;
    color:#fff; 
    z-index: 99;
    bottom: 10px;
    left: 50px important!;
    border: 2px solid white;
/* for IE */
  filter:alpha(opacity=80);
  /* CSS3 standard */
  opacity:0.8;
}

qui ne fait absolument rien. Comment puis-je remplacer le générique .tooltip pour personnaliser certaines info-bulles différemment?

Merci d'avance

jquerycsstooltip
24
elasticrash

Pour ceux qui souhaitent appliquer une classe personnalisée au nouveau widget info-bulle (interface utilisateur jQuery 1.9.1), extraClass ne semble plus fonctionner, mais il existe une nouvelle option appelée tooltipClass.

$('.selector').tooltip({
        tooltipClass: "your_class-Name",
});

Afin de résoudre les conflits potentiels avec les fichiers CSS de jQuery, vous devrez peut-être ajouter !important à la fin des lignes de votre fichier CSS. Merci à @sisharp pour l'avoir signalé :-)

64
Chaya Cooper

En essayant de construire sur l'excellente réponse ci-dessus, j'essayais de dénommer la bulle et de me débarrasser de l'ancienne. 

Si vous êtes novice comme moi (dans d’autres cas, une tâche simple prend des heures), c’est bien d’avoir la réponse en même temps au même endroit :) Voici la solution à partir de plusieurs sources, y compris cette question :

<a href="#"  title="We are trying hard" class="mytooltip"><span title="">BETA</scan></a>

L'étendue supprime la bulle du navigateur. 

Le CSS pour la nouvelle bulle à titre d'exemple:

.mytooltip:hover:after{
  background: #333;
  background: rgba(0,0,0,.9);
  border-radius: 5px;
  bottom: 26px;
  color: rgb(255, 77, 85);
  content: attr(title);
  right: 20%;
  padding: 5px 15px;
  position: absolute;
  z-index: 98;
  width: 220px;}
.mytooltip:hover:before{
    border: solid;
    border-color: #333 transparent;
    border-width: 6px 6px 0 6px;
    bottom: 20px;
    content: "";
    right: 50%;
    position: absolute;
    z-index: 99;
}

.mytooltip {
  radius: 4px !important;
  background-color: black;
   color: rgb(255, 77, 85) !important;
  padding: 5px 20px;
  border-radius: 20px;
  margin: 50px;
  text-align: center;
  font: bold 14px ;
  font-stretch: condensed;
  text-decoration: none;
  box-shadow: 0 0 10px black;
}

Et le script ci-dessus mentionné, inséré au pied de page:

<script>
$('.selector').tooltip({
        tooltipClass: "mytooltip",
});
</script>

Merci à cette question, this et j'ai oublié l'autre source. 

1
user2060451

J'ai essayé toutes les options ci-dessus et aucune n'a fonctionné pour moi.

J'ai examiné l'infobulle options docs qui était liée à cet article sur theming , après l'avoir lue, j'ai essayé ceci qui fonctionnait:

$('#my_selectr').tooltip({"classes": {"ui-tooltip": "my-custom-class-name", "ui-tooltip-content": "my-custom-class-name-content"}})

Ensuite, ajoutez simplement les 2 classes CSS avec votre style:

my-custom-class-name {
...
}
my-custom-class-name-content {
...
}

Notez que vous devrez peut-être utiliser! Important dans vos classes personnalisées.

1
AmitF

En fait sa 

$( ".selector" ).tooltip( "option", "tooltipClass", "custom-tooltip-styling" );

Voir ici

0
FredTheLover