Quite some time back I wrote about using the jQuery clueTip plugin to display additional data to the users of my application. At that time I only scratched the surface of what the clueTip plugin can do though by using the text within an item's title attribute. The plugin also supports displaying data retrieved through an Ajax call as well as the data from another item on the page.
In this demo I am going to show how to display local data when an icon is hovered over.
Demo |Download
End Product:
To start with, be sure to add the jQuery and clueTip scripts to your project as well as the css file for the clueTips.
jQuery:
<script type="text/javascript">
$(document).ready(function() {
$("#warning").cluetip({ width: 400, local: true, cursor: 'pointer', hideLocal: true });
$("#information").cluetip({ width: 500, local: true, cursor: 'pointer', hideLocal: true });
});
</script>
Html Markup:
<td>
<img src="_assets/img/information.png" alt="Information" id="information" rel="#instr" title="Updating Customer Details" />
<img src="_assets/img/exclamation.png" alt="Warning" id="warning" rel="#disclosure" title="Do Not Disclose Customer Data!" />
</td>
<div id="disclosure">
<p>
<b>Do not disclose Acme's fake customer details!</b> Unauthorized disclosure will result in termination.
</p>
</div>
<div id="instr">
<img src="_assets/img/smile.jpg" alt="Smile"/>
1. When speaking with a customer be sure to...<br />
2. Be friendly and courteous...<br />
3. Look for additional sales opportunities...
</div>
So, when the page is ready, a clueTip is added to each image. The image contains an attribute "rel" which tells the plugin which data from the page to display when the image is hovered over. The title attribute of the image is used as the header of the popup.
Stay tuned. I plan on looking into loading the clueTip's data through an Ajax call. Be sure to checkout the demo and let me know in the comments what can be improved.
Subscribe