JSFiddle - React, Tailwind, and code Playground

by Paul Leech

HTML

<div id="tt" class="tt" data-tooltip="I'm the first tooltip"><a href="javascript:void(0);">Test 1</a></div>
<div id="tt2" class="tt" data-tooltip="I'm the second tooltip"><a href="javascript:void(0);">Test 2</a></div>
<div id="tt3" class="tt" data-tooltip="I'm the third tooltip"><a href="javascript:void(0);">Test 3</a></div>

JavaScript

/*
$('.tt').on({
  "click": function() {
    //$(this).tooltip({ items: ".tt", content: "Displaying on click"});
    //$(this).tooltip({ items: ".tt", content: $('.tt').text()});
    $(this).tooltip({ items: ".tt", content: $(this).data('tooltip') });
    $(this).tooltip("open");
  },
  "mouseout": function() {      
     $(this).tooltip("disable");   
  }
});
*/

$('.tt').hover(function() {
    //$(this).tooltip({ items: ".tt", content: "Displaying on click"});
    //$(this).tooltip({ items: ".tt", content: $('.tt').text()});
    $(this).tooltip({ items: ".tt", content: $(this).data('tooltip') });
    $(this).tooltip("open");
  }, function() {      
     $(this).tooltip("disable");   
  }
});