jQuery Popup Bubble Tooltip

Question

I m trying to make a  bubble  that can popup when the onmouseover event is fired and will stay open as long as the mouse is over the item that threw the onmouseover event OR if the mouse is moved into the bubble  My bubble will need to have all manners of HTML and styling including hyperlinks  images  etc   I ve basically accomplished this by writing about 200 lines of ugly JavaScript but I would really like to find a jQuery plugin or some other way to clean this up a bit

User · Answer

Sounds to me you dn t want the mouse over events  you want the jQuery hover   event   And what you seem to want is a  rich  tooltip  in which case I suggest jQuery tooltip   With the bodyHandler option you can put arbitrary HTML in

User · Answer

Autoresize simple Popup Bubble  index html   lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 0 Transitional  EN   http   www w3 org TR xhtml1 DTD xhtml1-transitional dtd  gt   lt html xmlns  http   www w3 org 1999 xhtml  gt   lt head gt     lt meta http-equiv  Content-Type  content  text html  charset UTF-8    gt     lt link href  bubble css  type  text css  rel  stylesheet    gt     lt script language  javascript  type  text javascript  src  jquery js  gt  lt  script gt     lt script language  javascript  type  text javascript  src  bubble js  gt  lt  script gt   lt  head gt   lt body gt     lt br  gt  lt br  gt     lt div class  bubbleInfo  gt         lt div class  bubble  title  Text 1  gt Set cursor lt  div gt     lt  div gt     lt br  gt  lt br  gt  lt br  gt  lt br  gt     lt div class  bubbleInfo  gt         lt div class  bubble  title  Text 2  gt Set cursor lt  div gt     lt  div gt   lt  body gt   lt  html gt    bubble js    function             var i   0    var z 1    do      title       bubble eq   i      attr  title        if  title         z 0        else              bubble eq   i      after   lt table style  opacity  0  top  -50px  left  -33px  display  none   id  dpop  class  popup  gt  lt tbody gt  lt tr gt  lt td id  topleft  class  corner  gt  lt  td gt  lt td class  top  gt  lt  td gt  lt td id  topright  class  corner  gt  lt  td gt  lt  tr gt  lt tr gt  lt td class  left  gt  lt  td gt  lt td gt   title   lt  td gt  lt td class  right  gt  lt  td gt  lt  tr gt  lt tr gt  lt td class  corner  id  bottomleft  gt  lt  td gt  lt td class  bottom  gt  lt img src  bubble bubble-tail png  height  25px  width  30px    gt  lt  td gt  lt td id  bottomright  class  corner  gt  lt  td gt  lt  tr gt  lt  tbody gt  lt  table gt                bubble eq   i      removeAttr  title              i       while z gt 0         bubbleInfo   each function          var distance   10      var time   250      var hideDelay   500              var hideDelayTimer   null             var beingShown   false      var shown   false      var trigger       bubble   this       var info       popup   this  css  opacity   0                   trigger get 0   info get 0    mouseover function            if  hideDelayTimer  clearTimeout hideDelayTimer         if  beingShown    shown               don t trigger the animation again         return          else              reset position of info box         beingShown   true           info css           top  -40          left  10          display   block             animate           top   -     distance    px           opacity  1            time   swing   function               beingShown   false            shown   true                                      return false         mouseout function            if  hideDelayTimer  clearTimeout hideDelayTimer         hideDelayTimer   setTimeout function              hideDelayTimer   null          info animate             top   -     distance    px             opacity  0            time   swing   function                shown   false            info css  display    none                         hideDelay         return false                       bubble css     Booble     bubbleInfo       position  relative      width  500px     bubble             popup       position  absolute      display  none      z-index  50      border-collapse  collapse      font-size   8em     popup td corner       height  13px      width  15px     popup td topleft        background-image  url bubble bubble-1 png        popup td top        background-image  url bubble bubble-2 png       popup td topright        background-image  url bubble bubble-3 png       popup td left        background-image  url bubble bubble-4 png       popup td right        background-image  url bubble bubble-5 png       popup td bottomleft        background-image  url bubble bubble-6 png       popup td bottom        background-image  url bubble bubble-7 png        text-align  center     popup td bottom img        display  block       margin  0 auto      popup td bottomright        background-image  url bubble bubble-8 png

User · Answer

You can use qTip for this  However you d have to code a little for launching it on mouseover event  And in case you want a default watermark on your text fields  you d have to use the watermark plugin     I realized that this leads to lot of repetitive code  So I wrote a plugin on top of qTip that makes it really easy to attach informational popup to form fields  You can check it out here  https   bitbucket org gautamtandon jquery attachinfo  Hope this helps

User · Answer

QTip has bug with jQuery 1 4 2  I had to switch to jQuery Bubble Pop up http   www vegabit com jquery bubble popup v2  examples and it works great

User · Answer

I have programmed an useful jQuery Plugin to create easily smart bubble popups with only a line of code in jQuery   What You can do  - attach popups to any DOM element  - mouseover mouseout events automatically managed  - set custom popups events  - create smart shadowed popups   in IE too   - choose popup   s style templates at runtime  - insert HTML messages inside popups  - set many options as  distances  velocity  delays  colors     Popup   s shadows and colorized templates are fully supported by Internet Explorer 6   Firefox  Opera 9   Safari  You can download sources from http   plugins jquery com project jqBubblePopup

User · Answer

Qtip is the best one I ve seen  It s MIT licensed  beautiful  has all the configuration you need    My favorite lightweight option is tipsy  Also MIT licensed  It inspired Bootstrap s tooltip plugin

User · Answer

Although qTip  the accepted answer  is good  I started using it  and it lacked some features I needed   I then stumbled upon PoshyTip - it is very flexible  and really easy to use   And I could do what I needed

User · Answer

The new version 3 0 of the jQuery Bubble Popup plugin supports jQuery v 1 7 2  currently the latest and stable version of the most famous javascript library   The most interesting feature of the 3 0 version is that You can use together jQuery  amp  Bubble Popup plugin with any other libraries and javascript frameworks like Script aculo us  Mootols or Prototype because the plugin is completely encapsulated to prevent incompatibility problems   jQuery Bubble Popup was tested and supports a lot of known and    unknown    browsers  see the documentation for the complete list   Like previous versions  jQuery Bubble Popup plugin continues to be released under the MIT license  You are free to use jQuery Bubble Popup in commercial or personal projects as long as the copyright header is left intact   download the latest version or visit live demos and tutorials at http   www maxvergelli com jquery-bubble-popup

User · Answer

ColorTip is the most beautiful i ve ever seen

User · Answer

This can be done easily with the mouseover event as well  I ve done it and it doesn t take 200 lines at all  Start with triggering the event  then use a function that will create the tooltip      span clickme   mouseover function event        createTooltip event                     mouseout function           create a hidefunction on the callback if you want       hideTooltip          function createTooltip event                     lt div class  tooltip  gt test lt  div gt    appendTo  body        positionTooltip event                Then you create a function that position the tooltip with the offset position of the DOM-element that triggered the mouseover event  this is doable with css   function positionTooltip event       var tPosX   event pageX - 10      var tPosY   event pageY - 100         div tooltip   css   position    absolute    top   tPosY   left   tPosX

User · Answer

Tiptip is also a nice library

User · Answer

I m trying to make a  bubble  that can   popup when the onmouseover event is   fired and will stay open as long as   the mouse is over the item that threw   the onmouseover event OR if the mouse   is moved into the bubble  My bubble   will need to have all manners of html   and styling including hyperlinks    images  etc    All those events fully managed by this plugin     http   plugins jquery com project jqBubblePopup

User · Answer

Ok  after some work I m able to get a  bubble  to pop up and go away at all the right times  There is a LOT of styling that needs to happen still but this is basically the code i used    lt script type  text javascript  gt        --indicates the mouse is currently over a div     var onDiv   false        --indicates the mouse is currently over a link     var onLink   false        --indicates that the bubble currently exists     var bubbleExists   false        --this is the ID of the timeout that will close the window if the user mouseouts the link     var timeoutID       function addBubbleMouseovers mouseoverClass                  mouseoverClass  mouseover function event                if  onDiv    onLink                    return false                             onLink   true               showBubble call this  event                                mouseoverClass  mouseout function                 onLink   false              timeoutID   setTimeout hideBubble  150                          function hideBubble             clearTimeout timeoutID             --if the mouse isn t on the div then hide the bubble         if  bubbleExists  amp  amp   onDiv                     bubbleID   remove                  bubbleExists   false                       function showBubble event            if  bubbleExists                hideBubble                       var tPosX   event pageX   15          var tPosY   event pageY - 60              lt div ID  bubbleID  style  top     tPosY      left     tPosX      position  absolute  display  inline  border  2px  width  200px  height  150px  background-color  Red   gt TESTING             lt  div gt    mouseover keepBubbleOpen  mouseout letBubbleClose  appendTo  body             bubbleExists   true             function keepBubbleOpen             onDiv   true             function letBubbleClose             onDiv   false           hideBubble                  --TESTING             document   ready function             addBubbleMouseovers  temp1             lt  script gt    Here is a snippet of the html that goes with it    lt a href    class  temp1  gt Mouseover this for a terribly ugly red bubble  lt  a gt

[javascript] jQuery Popup Bubble/Tooltip

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to css