menu

Friday, 4 January 2013

Tool Tip Jquery Plugin


clueTip Plugin Example

Below are quite a few examples of how you can add a clueTip to your page, using a wide range of options. Keep in mind that there is nothing magical about the HTML markup. You can use any jQuery selector you want to attach your clueTips. For example, if you want to attach clueTips to all links with a class of "peanuts," you would simply write in your jQuery code:$('a.peanuts').cluetip();.

Default Style

  1. basic tip from titleThis example pulls the clueTip's contents from the invoking element's title attribute via the "splitTitle" option.
    View the HTML
    View the jQuery
  2. basic ajax, with no title attribute: This one requires no options.
    View the HTML
    View the jQuery
  3. custom width and hidden title bar: This tip has a custom width of 200px. The clueTip title bar (heading) is hidden. Try me!
    View the HTML
    View the jQuery
  4. sticky, with arrows:This sticky clueTip has its "close" text in the title bar. It won't close until you close it, or until you hover over another clue-tipped link. It also displays an arrow on one of its sides, pointing to the invoking element. sticky clueTip with arrows
    View the HTML
    View the jQuery

    Click For DEMO