Come cambiare il colore del tooltip all'apertura usando la descrizione comandi dell'interfaccia utente jQuery?

Question

Sto cercando di ottenere quanto segue, non riesco a capire come. Ho diverse descrizioni di comandi su una pagina, ma voglio che ognuna appaia diversa (a seconda della gravità, ad esempio). Ecco quello che ho finora:

<div id="container"> 
<a href="#" title="Tooltip 1" data-severity="warning">Tooltip 1 (Warning)</a> 
<a href="#" title="Tooltip 2" data-severity="danger">Tooltip 2 (Danger)</a> 
</div> 

<script type="text/javascript"> 
// init tooltip 
ArrowToolTip.init('container'); 
</script> 

/*JAVASCRIPT*/ 
var ArrowToolTip = { 
init: function (parentId) { 
    jQuery('#' + parentId).tooltip(
    { 
     content: function() { 
      var element = jQuery(this); 
      return element.attr('title'); 
     }, 
     create: function() { 
      var element = jQuery(this); 

      var severity = element.data('severity'); 

      if (!severity) { 
       severity = 'default'; 
      } 

      element.tooltip('option', 'tooltipClass', severity); 
     }, 
     open: function(event, ui) { 
      var element = jQuery(this); 
      var severity = element.data('severity'); 
      ui.tooltip({ 
       tooltipClass: severity 
      }); 
      //ui.tooltip.tooltipClass(severity); 
      console.log(event); 
      console.log(ui); 
     } 
    }); 
} 
} 

Qualunque cosa ho in CREATE: opere, ma si chiama solo al caricamento della pagina, in modo che non fa di me nulla di buono. Così ora sto provando a spostare questo all'evento open:. Ma non sembra funzionare affatto. Lo jQuery(this) non restituisce l'elemento al passaggio del mouse, restituisce il contenitore. Come posso ottenere l'elemento corretto per selezionare l'attributo dei dati? E come posso cambiare la classe CSS? Qualcuno sa come questo potrebbe essere raggiunto?

Answer 1

non ho avuto la logica molto bene, ma ecco come raggiungo classi diverse a seconda data-severity. Invece di applicare .tooltip() a tutti gli elementi, scorrere iteramente e impostare tooltipClass come $(this).data('severity'). La funzione content consente di aggiungere anche una classe.

$('a.tips').each(function() { 
 
    var severity = $(this).data('severity'); 
 
    $(this).tooltip({ 
 
     content: function() { 
 
      return '<em>' + $(this).attr('title') + '</em>'; 
 
     }, 
 
     tooltipClass: severity, 
 
     show: "slideDown", 
 
     open: function (event, ui) { 
 
      ui.tooltip.hover(function() { 
 
       $(this).fadeTo("slow", 0.5); 
 
      }); 
 
     } 
 
    }); 
 
});

.ui-tooltip { 
 
    padding: 10px 20px; 
 
    border-radius: 20px; 
 
    font: bold 14px"Helvetica Neue", Sans-Serif; 
 
    text-transform: uppercase; 
 
    box-shadow: 0 0 7px black; 
 
} 
 
.ui-tooltip.warning { 
 
    color: #E3E8F7; 
 
    background: #D94AA4; 
 
} 
 
.ui-tooltip.danger { 
 
    color: #212942; 
 
    background: #CABA75; 
 
} 
 
a.tips { float:left; margin: 0 10px; text-decoration:none; font: Sans-Serif; } 
 
body { background-color:#eee; padding: 30px; }

<link href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.4/css/jquery.ui.tooltip.min.css" rel="stylesheet"/> 
 
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> 
 

 
<div id="container"> 
 
<a href="#" title="Tooltip 1" class="tips" data-severity="warning">(Warning)</a> 
 
<a href="#" title="Tooltip 2" class="tips" data-severity="danger">(Danger)</a> 
 
</div>

Answer 2

Non sono chiaro riguardo al vostro desiderio. Ma spero che questo ti possa aiutare a volte ....

Sto usando il nome di tooltipClass come "tooltipclass" nel mio jQuery.

$(document).tooltip({effect: "blind", duration: 1000, tooltipClass: 'tooltipclass'}); 

E utilizzando il nome di questa classe è possibile dare uno stile alla punta dello strumento.

.tooltipclass{ 
    font-size: 12px; 
    border:1px solid #e74c3c; 
} 

quindi provare a utilizzare diversi nomi tooltipClass .........