Jak zmienić kolor podpowiedzi na otwartej przy użyciu etykiety jQuery UI?

Question

Próbuję osiągnąć następujące, nie mogę dowiedzieć się jak. Mam kilka etykiet narzędzi na stronie, ale chcę, aby każdy wyglądał inaczej (w zależności od wagi na przykład). Oto co mam do tej pory:

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

Cokolwiek mam w Create: działa, ale to się nazywa tylko na stronie obciążenia, tak, że nie robi mi jakieś dobre. Teraz próbuję przenieść to do zdarzenia open:. Ale to w ogóle nie działa. jQuery(this) nie zwraca zwisającego elementu, zwraca kontener. Jak mogę uzyskać prawidłowy element, aby wybrać atrybut danych? I jak mogę zmienić klasę CSS? Czy ktoś wie, jak można to osiągnąć?

Answer 1

nie dostać logiki bardzo dobrze, ale oto jak to osiągnąć różne klasy w zależności od data-severity. Zamiast stosowania .tooltip() dla wszystkich elementów, należy je iterować i ustawić tooltipClass jako . Funkcja zawartości pozwala również dodać klasę.

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

Nie jestem do końca przekonany o twojej wątpliwości. Ale mam nadzieję, że to pomoże ci czasami ....

Używam nazwa tooltipClass jako "tooltipclass" w moim jquery.

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

Używając tej nazwy klasy można nadać każdej stylizacji końcówkę narzędzia.

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

więc wypróbować różne nazwy tooltipClass .........