clueTip: A jQuery Tooltip Plugin

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" />
Advertisements

About amitsonikhandwa
I am a web developer working in PHP and MYSQL with AJAX, jQuery and JavaScript. I am in web development since 2007.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s