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
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
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”
width You can specify custom width of the tooltip. Any integer value followed by “px”
Example : “100px”
effect This property defines animation effect that will be used to load the tooltip.
  • fade
  • slide
cssclass If you want to customize the tooltip css properties, you can use this option and set your custom css class.

1 Comment

Leave a Comment


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


Let your friends know what are you reading

Share this post with your friends!