title: How to change tooltip color on open using jQuery UI Tooltip?
body: <p>I'm trying to achieve the following, can't figure out how though. I have several tooltips on a page, but I want each one to look different (depending on severity for instance). Here is what I have so far:</p>
  
  <pre><code>&lt;div id="container"&gt;
  &lt;a href="#" title="Tooltip 1" data-severity="warning"&gt;Tooltip 1 (Warning)&lt;/a&gt;
  &lt;a href="#" title="Tooltip 2" data-severity="danger"&gt;Tooltip 2 (Danger)&lt;/a&gt;
  &lt;/div&gt;
  
  &lt;script type="text/javascript"&gt;
  // init tooltip
  ArrowToolTip.init('container');
  &lt;/script&gt;
  
  /*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);
          }
      });
  }
  }
  </code></pre>
  
  <p>Whatever I have in the create: works, but it's only called on page load, so that doesn't do me any good. So now I'm trying to move this to the <code>open:</code> event. But that doesn't seem to work at all. The <code>jQuery(this)</code> doesn't return the hovered element, it returns the container. How can I get the correct element to select the data attribute? And how can I then change the CSS class? Does anyone know how this could be achieved? </p>