Displaying certain tooltips
So far, we've assigned all of our tooltips to work using the $(document) object; whilst this will work perfectly well, it does mean that our tooltips will always follow the same format, and work in the same manner, as the configuration will apply to all tooltips on that page.
We can easily change this, though; jQuery UI's Tooltip will work equally fine with any jQuery selectors, as it does with the document object. To prove this, let's take a look at how you would configure tooltip to work with a specific element.
In tooltip2.html, change the final <script> element to the following:
<script>
$(document).ready(function($){
$("#input").tooltip();
});
</script> We don't need the CSS override styles, so remove this line from the <head> of the document:
<link rel="stylesheet" href="css/tooltipOverride.css">
We also need to add the following code below the existing markup:
<p>Tooltips are also useful for form elements,...
