Wie ändert man Tooltip-Farbe beim Öffnen mit jQuery UI Tooltip?

Question

Ich versuche, das Folgende zu erreichen, kann nicht herausfinden, wie es ist. Ich habe mehrere QuickInfos auf einer Seite, aber ich möchte, dass jeder anders aussieht (je nach Schweregrad zum Beispiel). Hier ist, was habe ich bisher:

<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); 
     } 
    }); 
} 
} 

Was auch immer ich in den erstellen: Werke, aber es ist nur beim Laden der Seite aufgerufen, so dass mich nicht tun etwas Gutes. So, jetzt versuche ich, dies zum open: Ereignis zu bewegen. Aber das scheint überhaupt nicht zu funktionieren. Die jQuery(this) gibt das Element hovered nicht zurück, es gibt den Container zurück. Wie kann ich das richtige Element zum Auswählen des Datenattributs erhalten? Und wie kann ich dann die CSS-Klasse ändern? Weiß jemand, wie das erreicht werden könnte?

Answer 1

Ich habe nicht Ihre Logik sehr gut, aber hier ist, wie ich je nach data-severity verschiedenen Klassen zu erreichen. Anstatt auf alle Elemente anzuwenden, durchlaufen Sie sie und setzen Sie tooltipClass als $(this).data('severity'). Die Inhaltsfunktion erlaubt auch das Hinzufügen einer Klasse.

$('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

ich bin nicht klar über Ihre Queuing. Aber ich hoffe, dass Ihnen das manchmal hilft ....

Ich benutze TooltipClass Name als "Tooltipclass" in meinem jquery.

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

Und mit diesem Klassennamen können Sie dem Tooltipp jedes Styling geben.

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

so versuchen, verschiedene tooltipClass Namen .........