JSFiddle - React, Tailwind, and code Playground

by Stephen Dunne

HTML

<script src="http://code.jquery.com/ui/1.11.0-beta.1/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.0-beta.1/themes/base/jquery-ui.css">
<p>Step 1: Hover over the link below, you will see a tool tip containing the text "Initial State" </p>

<p>Step 2: click the button - it will show the current title of the link.</p>

<p>Step 3: Click the link and see the tooltip changes to "New Title" </p>

<p>Step 4: click the button - it will show the links title attribute is now set back to "Initial State" </p>

<p>
    <a id="link" href="#" title="Initial State">Test link</a>
</p>
<p>
    <input type="button" value="Show link title" id="test"/>
</p>

JavaScript

var link = $("#link");

link.tooltip();

link.on("click", function(){
    link.tooltip("option", "content", "New Title");
});

$("#test").on("click", function(){ 
    alert("The link title is \"" + link.attr("title") + "\"");
});