Make Bootstrap Popover Appear Disappear on Hover instead of Click

Question

I m building a website with Bootstrap s Popover and I can t figure out how to make the popover appear on hover instead of click   All I want to do is have a popover appear when someone hovers over a link instead of clicking on it and for the popover to disappear when they move away  The documentation says it s possible using either the data attribute or jquery  I d much rather do it with jquery since I have multiple popovers

User · Answer

I d like to add that for accessibility  I think you should add focus trigger    i e      popover   popover   trigger   hover focus

User · Answer

If you want to hover the popover itself as well you have to use a manual trigger   This is what i came up with    function enableThumbPopover         var counter           thumbcontainer   popover           trigger   manual           animation  false          html  true          title  function                  return   this  parent   find   thumbPopover  gt   title   html                       content  function                  return   this  parent   find   thumbPopover  gt   body   html                       container   body           placement   auto         on  mouseenter  function              var  this   this     thumbcontainer          console log  thumbcontainer mouseenter              clear the counter         clearTimeout counter              Close all other Popovers             thumbcontainer   not  this  popover  hide                start new timeout to show popover         counter   setTimeout function                if    this  is   hover                                     this  popover  show                                  popover   on  mouseleave   function                          thumbcontainer   popover  hide                               400           on  mouseleave   function              var  this   this           setTimeout function                  if       popover hover   length                    if     this  is   hover       change   this  to    this                                            this  popover  hide                                               200

User · Answer

The functionality  you described  can be easily achieved using the Bootstrap tooltip    lt button id  example1  data-toggle  tooltip  gt Tooltip on left lt  button gt    Then call tooltip   function for the element       example1   tooltip      http   getbootstrap com javascript  tooltips

User · Answer

After trying a few of these answers and finding they don t scale well with multiple links  for example the accepted answer requires a line of jquery for every link you have   I came across a way that requires minimal code to get working  and it also appears to work perfectly  at least on Chrome   You add this line to activate it       data-toggle  popover     popover      And these settings to your anchor links   data-toggle  popover  data-trigger  hover    See it in action here  I m using the same imports as the accepted answer so it should work fine on older projects

User · Answer

Set the trigger option of the popover to hover instead of click  which is the default one   This can be done using either data-  attributes in the markup    lt a id  popover  data-trigger  hover  gt Popover lt  a gt    Or with an initialization option       popover   popover   trigger   hover        Here s a DEMO

[javascript] Make Bootstrap Popover Appear/Disappear on Hover instead of Click

Examples related to javascript

Examples related to jquery

Examples related to twitter-bootstrap