Как изменить цвет всплывающей подсказки при открытии с помощью JQuery UI Tooltip?

Question

Я пытаюсь добиться следующего, не могу понять, как это сделать. У меня есть несколько подсказок на странице, но я хочу, чтобы каждый из них выглядел по-другому (в зависимости от серьезности, например). Вот то, что я до сих пор:

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

Все, что у меня есть в создания: работает, но это только называется на странице загрузки, так что не делает мне ничего хорошего. Итак, теперь я пытаюсь переместить это событие open:. Но это, похоже, не работает вообще. jQuery(this) не возвращает наведенный элемент, он возвращает контейнер. Как я могу получить правильный элемент для выбора атрибута данных? И как я могу изменить класс CSS? Кто-нибудь знает, как это можно достичь?

Answer 1

Я не получил вашу логику очень хорошо, но вот как я достигаю различных классов в зависимости от data-severity. Вместо того, чтобы применять .tooltip() ко всем элементам, пройдите через них и установите tooltipClass как $(this).data('severity'). Функция содержимого также позволяет добавить класс.

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

Я не понимаю о вашем завершении. Но я надеюсь, что это поможет вам иногда ....

Я использую имя tooltipClass как «tooltipclass» в моем jquery.

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

И используя это имя класса, вы можете дать какой-либо стиль на кончике инструмента.

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

так попробуйте использовать разные имена tooltipClass .........