jQuery UI

Widgets - Menu and Tooltip

HTML

<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
  </script>
</head>
<body>
 
<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Fun Fact 1</a></li>
    <li><a href="#tabs-2">Fun Fact 2</a></li>
  </ul>
  <div id="tabs-1">
    <p>Here is a fun fact.</p>
  </div>
  <div id="tabs-2">
    <p>Another fun fact.</p>
  </div>
  </div>
</div>
<p>Let's display some text with <span class="tip" title="Fun fact #1">tooltips</span>. It should be a paragraph<span class="tip" title="Fun fact #2">.</span></p>

<form>
    <input type="text" title="Enter your username please" placeholder="Username"/>
</form>

<button>A button element</button>

CSS

.tip{
    color:#f90;
}

JavaScript

$(function () {

    $("span.tip").tooltip({
        //track: true   
    });
  $(function() {
    $( "#tabs" ).tabs();
  });

$(function() {
    $( "input[type=submit], a, button" )
      .button()
      .click(function( event ) {
        event.preventDefault();
      });
  });
});