quickTip jquery tooltip plugin

    After reading the post title you must be thinking there are already lot of jquery tooltip plugins out there, then why one more ? well, i wanted to see what it takes to create tooltip plugin. Still if you ask about feature there is only one feature about this plugin, its “simplicity”. As i said its easy to configure this plugin and you are get to go.
Here is simple call to this jquery tooltip plugin

  $(".tip").quicktip();

This simple setup will enable tooltip on all the element having class “tip”

quicktip jquery tooltip plugin

quicktip jquery tooltip plugin


   This plugin will be useful for those who want basic jquery tooltip plugin with only few options. I have designed this jquery tooltip plugin only for those who want basic plugin, there are already lot of good jquery plugins with huge list of options and settings.

quickTip jquery tooltip plugin options

Option Description Possible Values Default Value
type Type of the contents to be displayed.
  • plain – You must have “title” attribute value set for that element. Contents of “title” attribute will be used as tooltip text.
  • html – Specify “href=”#div_holding_tip_contents” in anchor and create “<div id=”div_holding_tip_contents”>tool tip </div>” somewhere on the same page.
  • externalpage – This option enables contnets to be loaded from external page via Ajax. While using this option make sure you have specified “url” option value.
  • plain
  • html
  • externalpage
plain
url This option needs to set when your tooltip content type is “externalpage”. This will point to the pege that will be called via Ajax request and response returned by the page will be shown as tooltip contents.
height You can specify custom height of the tooltip. Any integer value followed by “px”
Example : “100px”
Auto
width You can specify custom width of the tooltip. Any integer value followed by “px”
Example : “100px”
Auto
effect This property defines animation effect that will be used to load the tooltip.
  • fade
  • slide
fade
cssclass If you want to customize the tooltip css properties, you can use this option and set your custom css class. - -

About Amit

   Myself Amit Patil from Maharashtra (India). I have been working as a Web Application Developer from last 5+ years, and its my passion to learn new things and implement them as a practice. Basically i am a PHP developer but now a days exploring more in CSS and javascript.

Comments

  1. I love the custom css functionality, its awesome plugin.

Speak Your Mind

*


*

Notify me of followup comments via e-mail. You can also subscribe without commenting.

More in jQuery, jQuery Plugins (4 of 31 articles)


In our previous tutorials we have had look at different features of css3 and html5 like creating css3 flowers ...