JSFiddle - React, Tailwind, and code Playground

by freedawirl

HTML

<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">


<a id="show-option" href="#" title="
Commuter routes extend beyond the
metropolitan area and are good choices for
people who live in suburban communities
but work in the city. Commuter passes allow
access to:
    MetroRail,
    MetroExpress routes 900-990,
    Plus all Local and Premium servic">Commuter</a>



 
<div id="dialog" title="Basic dialog">
  <p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
 
<button id="opener">Open Dialog</button>

CSS

.ui-tooltip {
    padding: 10px 20px;
    color: black;
    border-radius: 20px;
    font: bold 14px "Helvetica Neue", Sans-Serif;
    text-transform: uppercase;
    box-shadow: 0 0 7px black;
  }

JavaScript

$(function() {
    $( "#show-option" ).tooltip({
       show: null,
      position: {
        my: "left top",
        at: "left bottom"
      },
      open: function( event, ui ) {
        ui.tooltip.animate({ top: ui.tooltip.position().top + 10 }, "fast" );
      }
   
    });

  });



  $(function() {
    $( "#dialog" ).dialog({
      autoOpen: false,
       show: null,
      position: {
        my: "left top",
        at: "left bottom"
      },
      open: function( event, ui ) {
        ui.tooltip.animate({ top: ui.tooltip.position().top + 10 }, "fast" );
      },
      hide: {
        effect: "explode",
        duration: 1000
      }
    });
 
    $( "#opener" ).click(function() {
      $( "#dialog" ).dialog( "open" );
    });
  });