How can I display a tooltip message on hover using jQuery

Question

As the title states  how can I display a tooltip message on hover using jQuery

User · Answer

You can use bootstrap tooltip  Do not forget to initialize it    lt span class  tooltip-r  data-toggle  tooltip  data-placement  left  title  Explanation  gt  inside span  lt  span gt    Will be shown text Explanation on the left side   and run it with js       tooltip-r   tooltip

User · Answer

As recommended qTip and other projects are quite old I recommend using qTip2 as it is most up-to-date

User · Answer

take a look at the jQuery Tooltip plugin  You can pass in an options object for different options    There are also other alternative tooltip plugins available  of which a few are   Random Next   s jQuery AJAX tooltip  dhtml goodies AJAX tooltip clueTip   Take look at the demos and documentation and please update your question if you have specific questions about how to use them in your code

User · Answer

Following will work like a charm  assuming you have div span table tr td etc with  id   myId            myId   hover function               this  css  cursor   pointer   attr  title    This is a hover text            function               this  css  cursor   auto              As a complimentary   css  cursor   pointer   will change the mouse pointer on hover

User · Answer

You can do it using just css without using any jQiuery    lt a class  tooltips  gt      Hover Me      lt span gt My Tooltip Text lt  span gt   lt  a gt   lt style gt      a tooltips           position  relative          display  inline                 a tooltips span               position  absolute              width  200px              color   FFFFFF              background   000000              height  30px              line-height  30px              text-align  center              visibility  hidden              border-radius  6px                         a tooltips span after                   content                      position  absolute                  top  100                   left  35                   margin-left  -8px                  width  0                  height  0                  border-top  8px solid  000000                  border-right  8px solid transparent                  border-left  8px solid transparent                     a hover tooltips span           visibility  visible          opacity  0 8          bottom  30px          left  50           margin-left  -76px          z-index  999         lt  style gt

User · Answer

Tooltip plugin might be too heavyweight for what you need  Simply set the  title  attribute with the text you desire to show in your tooltip       yourElement   attr  title    This is the hover-over text

User · Answer

Take a look at ToolTipster   easy to use flexible pretty lightweight  compared to some other tooltip plugins  39kB  looks better  without additional styling has a good set of predefined themes

User · Answer

I suggest qTip

[jquery] How can I display a tooltip message on hover using jQuery?

Examples related to jquery