clueTip: A jQuery Tooltip Plugin
January 29, 2013 Leave a comment
Overview
The clueTip plugin allows you to easily show a fancy tooltip when the user’s mouse hovers over (or, optionally, clicks on) any element you designate in your script. If the element includes a title attribute, its text becomes the heading of the clueTip.
Quick Start Guide
Showing the most basic clueTip can be achieved in two easy steps.
Add HTML markup to your page for elements that you want to invoke a clueTip. By default, the clueTip plugin will use the
rel attribute to load contents into the tooltip body via AHAH.
<!-- use ajax/ahah to pull content from fragment.html: -->
<p><a class="tips" href="fragment.html" rel="fragment.html">show me the cluetip!</a></p>
<!-- use title attribute for clueTip contents, but don't include anything in the clueTip's heading -->
<p><a id="houdini" href="houdini.html" title="|Houdini was an escape artist.|He was also adept at prestidigitation.">Houdini</a></p>
Include the jQuery core file and the clueTip plugin in the
<head> of your document. You may optionally include the hoverIntent plugin as well. After these scripts are referenced, you can reference a custom script file to invoke your clueTips (preferred) or enter the script directly in the <head> (shown below). You should also include the clueTip stylesheet (jquery.cluetip.css) after the scripts.<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.hoverIntent.js" type="text/javascript"></script> <!-- optional -->
<script src="jquery.cluetip.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('a.tips').cluetip();
$('#houdini').cluetip({
splitTitle: '|', // use the invoking element's title attribute to populate the clueTip...
// ...and split the contents into separate divs where there is a "|"
showTitle: false // hide the clueTip's heading
});
});
</script>
<link rel="stylesheet" href="jquery.cluetip.css" type="text/css" />
About amitsonikhandwa
PHP World 