How can I keep Bootstrap popovers alive while being hovered

Question

I am using a Bootstrap popover to create a hover card showing user info  and I am triggering it on mouseover of a button  I want to keep this popover alive while the popover itself is being hovered  but it disappears as soon as the user stops hovering over the button  How can I do this    x000D   x000D      example   popover   x000D      html   true  x000D      trigger    manual   x000D      content   function     x000D          return   lt div class  box  gt Popover lt  div gt    x000D        x000D      x000D   x000D    document  on  mouseover     example   function    x000D          example   popover  show    x000D      x000D   x000D    document  on  mouseleave     example   function    x000D          example   popover  hide    x000D      x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 2 2 4 jquery js  gt  lt  script gt  x000D   lt script src  https   unpkg com  popperjs core 2  gt  lt  script gt  x000D   lt script src  https   maxcdn bootstrapcdn com bootstrap 3 3 7 js bootstrap min js  gt  lt  script gt  x000D   lt link rel  stylesheet  href  https   maxcdn bootstrapcdn com bootstrap 3 3 7 css bootstrap min css   gt  x000D   x000D   lt a href     id  example  class  btn btn-danger  rel  popover   gt hover for popover lt  a gt  x000D   x000D   x000D

User · Answer

I think an easy way would be this       popover   each function                          var  this     this                        this popover                           trigger   hover                           content   Content Here                           container   this                                              This way the popover is created inside the target element itself  so when you move your mouse over the popover  it s still over the element  Bootstrap 3 3 2 works well with this  Older version may have some problems with animation  so you may want to disable  animation false

User · Answer

Simple         data-toggle  popover     popover     container   body    trigger   focus    html  true         data-toggle  popover     mouseenter function          this  trigger  focus

User · Answer

I found that the accepted answer and the similar ones to it had some flaws  Mainly that it s repeatedly adding that mouseleave listener to the element  I ve combined their solution with some custom code to achieve the functionality in question without memory leaks or listener bloat      var getPopoverTimeout   function   el            return  el data  timeout               element popover           trigger   quot manual quot           html  true          content               title               container   element         on  quot mouseenter quot   function              var  this     this           if    this find   popover   length                 this popover  quot show quot              else if  getPopoverTimeout  element                 clearTimeout getPopoverTimeout  element                     on  quot mouseleave quot   function              var  this     this            element data  timeout   setTimeout function                  if      quot  popover hover quot   length                     this popover  quot hide quot                            250             Which provides a nice  hover-intent  like solution so that it doesn t flash in and out

User · Answer

I recently needed to get this working with KO and the above solutions didn t work well when having a delay on show and hide  The below should fix this  Based on how bootstrap tooltips work  Hope this helps someone   var options                     delay    show  1000  hide  50                    trigger   manual                                         html  true                var  popover     element  popover options     popover on  mouseenter   function         This is entering the triggering element     var self   this       clearTimeout self timeout       self hoverState    in        self timeout   setTimeout function              if  self hoverState     in                   self  popover  show                     popover   popover     on  mouseover   function         This is moving over the popover                 clearTimeout self timeout                                                                                                     popover   on  mouseleave   function         This is leaving the popover                 self timeout   setTimeout function                          if  self hoverState     out                               self  popover  hide                                             options delay hide                                    options delay show      on  mouseleave   function  event       This is leaving the triggering element     var self   this       clearTimeout self timeout       self hoverState    out        self timeout   setTimeout function                                           if  self hoverState     out                   self  popover  hide                      options delay hide

User · Answer

It will be more flexible with hover         my-popover   hover      function         mouse in event          this     this            this popover               html  true              content   Your content               trigger   manual               animation  false                          this popover  show                popover   on  mouseleave   function                  this popover  hide                           function         mouse out event         setTimeout function                 if       popover hover   length                     this popover  hide                             100

User · Answer

Here is a solution I devised that seems to work well while also allowing you to use the normal Bootstrap implementation for turning on all popovers   Original fiddle  https   jsfiddle net eXpressive hfear592   Ported to this question    lt a href     id  example  class  btn btn-danger  rel  popover   gt hover for popover lt  a gt       example   popover       html   true      trigger    hover       content   function             return   lt div class  box  gt  lt  div gt             on  hide bs popover   function          if      popover hover   length          return false                                 body   on  mouseleave     popover   function            popover   popover  hide

User · Answer

This is how I did with bootstrap popover with help of other bits around the net  Dynamically gets the title and content from die various products displayed on site  Each product or popover gets unique id  Popover will disappear when exiting the product   this  pop  or the popover  Timeout is used where will display the popover until exit through  product instead of popover       pop   each function              var  pElem     this            pElem popover                                html  true                  trigger   manual                   title  getPopoverTitle  pElem attr  id                     content  getPopoverContent  pElem attr  id                     container   body                   animation false                                 on  mouseenter   function              var  this   this            this  popover  show            console log  mouse entered                popover   on  mouseleave   function                     this  popover  hide                       on  mouseleave   function              var  this   this          setTimeout function                  if       popover hover   length                       this  popover  hide                             100               function getPopoverTitle target            return         target     content  gt  h3 popover-title   html                function getPopoverContent target            return         target     content  gt  div popover-content   html

User · Answer

I found the mouseleave will not fire when weird things happen  like the window focus changes suddenly  then the user comes back to the browser  In cases like that  mouseleave will never fire until the cursor goes over and leaves the element again   This solution I came up with relies on mouseenter on the window object  so it disappears when the mouse is moved anywhere else on the page   This was designed to work with having multiple elements on the page that will trigger it  like in a table    var allMenus       menus    allMenus popover       html  true      trigger   manual       placement   bottom       content      menuContent   0  outerHTML    on  mouseenter    e    gt        allMenus not e target  popover  hide          e target  popover  show        e stopPropagation       on  shown bs popover        gt          window  on  mouseenter hidepopover    e    gt            if    e target  parents   popover   length     0                allMenus popover  hide                  window  off  mouseenter hidepopover

User · Answer

This solution worked out fine for me   now its bulletproof   -   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                                             this  popover  hide                                               200

User · Answer

Same thing for tooltips   For me following solution works because it does not add event listeners on every  mouseenter  and it is possible to hover back on the tooltip element which keeps the tooltip alive     - gt         element   tooltip       html  true      trigger   manual          on  mouseenter   - gt      clearTimeout window tooltipTimeout       this  tooltip  show   unless     tooltip visible   length  gt  0       on  mouseleave   - gt       this   this     window tooltipTimeout   setTimeout - gt           this  tooltip  hide         100    document  on  mouseenter     tooltip   - gt    clearTimeout window tooltipTimeout    document  on  mouseleave     tooltip   - gt    trigger       this  siblings   element   0     window tooltipTimeout   setTimeout - gt      trigger tooltip  hide       100

User · Answer

This is my code for show dynamics tooltips with delay and loaded by ajax    x000D   x000D    window  on  load   function      x000D      generatePopovers    x000D       x000D        fn dataTable tables   visible  true  api  true    on  draw dt   function      x000D          generatePopovers    x000D          x000D      x000D   x000D    document  ajaxStop function      x000D      generatePopovers    x000D      x000D   x000D   x000D     x000D   x000D  function generatePopovers     x000D  var popover      a href      Something aspx        locate the elements to popover x000D   x000D  popover each function  index    x000D      var poplink     this   x000D      if  poplink attr  data-toggle      null    x000D          console log  RENDER POPOVER      poplink attr  href     x000D          poplink attr  data-toggle    popover    x000D          poplink attr  data-html    true    x000D          poplink attr  data-placement    top    x000D          poplink attr  data-content    Loading       x000D          poplink popover   x000D              animation  false  x000D              html  true  x000D              trigger   manual   x000D              container   body   x000D              placement   top  x000D             on  mouseenter   function      x000D              var thispoplink   poplink  x000D              setTimeout function      x000D                  if  thispoplink is   hover      x000D                      thispoplink popover  show    x000D                      loadDynamicData thispoplink     load data by ajax if you want x000D                         body  popover   on  mouseleave   function      x000D                          thispoplink popover  hide    x000D                          x000D                    x000D                 1000   x000D             on  mouseleave   function      x000D              var thispoplink   poplink  x000D              setTimeout function      x000D                  if      body   find   popover hover   length    x000D                      thispoplink popover  hide    x000D                    x000D                 100   x000D              x000D        x000D      x000D   x000D   x000D     x000D   x000D  function loadDynamicData popover    x000D      var params   new Object    x000D      params somedata   popover attr  href   split  somedata    1     obtain a parameter to send x000D      params   JSON stringify params   x000D        check if the content is not seted x000D      if  popover attr  data-content       Loading        x000D            ajax   x000D              type   POST   x000D              url      Default aspx ObtainData   x000D              data  params  x000D              contentType   application json  charset utf-8   x000D              dataType   json   x000D              success  function  data    x000D                  console log JSON parse data d    x000D                  var dato   JSON parse data d   x000D                  if  dato    null    x000D                      popover attr  data-content  dato something      here you can set the data returned x000D                      if  popover is   hover      x000D                          popover popover  show      use this for reload the view x000D                        x000D                    x000D                 x000D   x000D              failure  function  data    x000D                  itShowError  - Error AJAX  lt br gt     x000D                x000D              x000D        x000D    x000D   x000D   x000D

User · Answer

The chosen answer works but will fail if the popover is initialized with the body as the container      a   popover   container   body        A solution based on the chosen answer is the following code that needs to be placed before using the popover   var originalLeave     fn popover Constructor prototype leave    fn popover Constructor prototype leave   function obj        var self   obj instanceof this constructor   obj     obj currentTarget  this type  this getDelegateOptions    data  bs     this type       originalLeave call this  obj        if  obj currentTarget            self  tip one  mouseenter   function                 clearTimeout self timeout               self  tip one  mouseleave   function                       fn popover Constructor prototype leave call self  self                                         The change is minimal using self  tip instead of traversing the DOM expecting the popover to be always a siblings of the element

User · Answer

Here s my take  http   jsfiddle net WojtekKruszewski Zf3m7 22   Sometimes while moving mouse from popover trigger to actual popover content diagonally  you hover over elements below  I wanted to handle such situations     as long as you reach popover content before the timeout fires  you re safe  the popover won t disappear   It requires delay option   This hack basically overrides Popover leave function  but calls the original  which starts timer to hide the popover   Then it attaches a one-off listener to mouseenter popover content element s   If mouse enters the popover  the timer is cleared  Then it turns it listens to mouseleave on popover and if it s triggered  it calls the original leave function so that it could start hide timer   var originalLeave     fn popover Constructor prototype leave    fn popover Constructor prototype leave   function obj     var self   obj instanceof this constructor       obj     obj currentTarget  this type  this getDelegateOptions    data  bs     this type    var container  timeout     originalLeave call this  obj      if obj currentTarget        container     obj currentTarget  siblings   popover       timeout   self timeout      container one  mouseenter   function            We entered the actual popover     call off the dogs       clearTimeout timeout           Let s monitor popover content instead       container one  mouseleave   function              fn popover Constructor prototype leave call self  self

User · Answer

Test with code snippet below  Small modification  From the solution provided by vikas  to suit my use case    Open popover on hover event for the popover button Keep popover open when hovering over the popover box Close popover on mouseleave for either the popover button  or the popover box    x000D   x000D      pop   popover       trigger   manual       html  true      animation  false         on  mouseenter   function         var  this   this        this  popover  show            popover   on  mouseleave   function              this  popover  hide                 on  mouseleave   function         var  this   this      setTimeout function           if       popover hover   length               this  popover  hide                   300         x000D   lt  DOCTYPE html gt   lt html gt    lt head gt     lt link data-require  bootstrap-css    data-semver  3 2 0  rel  stylesheet  href    maxcdn bootstrapcdn com bootstrap 3 2 0 css bootstrap min css    gt     lt script data-require  jquery    data-semver  2 1 1  src    cdnjs cloudflare com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt     lt script data-require  bootstrap    data-semver  3 2 0  src  https   maxcdn bootstrapcdn com bootstrap 3 2 0 js bootstrap js  gt  lt  script gt      lt link rel  stylesheet  href  style css    gt    lt  head gt    lt body gt     lt h2 class  text-primary  gt Another Great  KISS  Bootstrap Popover example  lt  h2 gt     lt p class  text-muted  gt KISS   Keep It Simple S     lt  p gt      lt p class  text-primary  gt Goal  lt  p gt     lt ul gt       lt li gt Open popover on hover event for the popover button lt  li gt       lt li gt Keep popover open when hovering over the popover box lt  li gt       lt li gt Close popover on mouseleave for either the popover button  or the popover box  lt  li gt     lt  ul gt      lt button type  button  class  btn btn-danger pop  data-container  body  data-toggle  popover  data-placement  right  data-content  Optional parameter  Skip if this was not requested lt br gt                                     A placement group is a logical grouping of instances within a single Availability                                     Zone  Using placement groups enables applications to get the full-bisection bandwidth                                     and low-latency network performance required for tightly coupled  node-to-node                                     communication typical of HPC applications  lt br gt                                     This only applies to cluster compute instances  cc2 8xlarge  cg1 4xlarge  cr1 8xlarge  hi1 4xlarge and hs1 8xlarge  lt br gt                                     More info   lt a href  amp quot http   docs aws amazon com AWSEC2 latest UserGuide placement-groups html amp quot  target  amp quot  blank amp quot  gt Click here    lt  a gt       data-original-title    title    gt      HOVER OVER ME      lt  button gt     lt br gt  lt br gt     lt button type  button  class  btn btn-info pop  data-container  body  data-toggle  popover  data-placement  right  data-content  Optional parameter  Skip if this was not requested lt br gt                                     A placement group is a logical grouping of instances within a single Availability                                     Zone  Using placement groups enables applications to get the full-bisection bandwidth                                     and low-latency network performance required for tightly coupled  node-to-node                                     communication typical of HPC applications  lt br gt                                     This only applies to cluster compute instances  cc2 8xlarge  cg1 4xlarge  cr1 8xlarge  hi1 4xlarge and hs1 8xlarge  lt br gt                                     More info   lt a href  amp quot http   docs aws amazon com AWSEC2 latest UserGuide placement-groups html amp quot  target  amp quot  blank amp quot  gt Click here    lt  a gt       data-original-title    title    gt      HOVER OVER ME    Again       lt  button gt  lt br gt  lt br gt     lt button type  button  class  btn btn-success pop  data-container  body  data-toggle  popover  data-placement  right  data-content  Optional parameter  Skip if this was not requested lt br gt                                     A placement group is a logical grouping of instances within a single Availability                                     Zone  Using placement groups enables applications to get the full-bisection bandwidth                                     and low-latency network performance required for tightly coupled  node-to-node                                     communication typical of HPC applications  lt br gt                                     This only applies to cluster compute instances  cc2 8xlarge  cg1 4xlarge  cr1 8xlarge  hi1 4xlarge and hs1 8xlarge  lt br gt                                     More info   lt a href  amp quot http   docs aws amazon com AWSEC2 latest UserGuide placement-groups html amp quot  target  amp quot  blank amp quot  gt Click here    lt  a gt       data-original-title    title    gt      Okay one more time           lt  button gt     lt br gt  lt br gt     lt p class  text-info  gt Hope that helps you    Drove me crazy for a while lt  p gt     lt script src  script js  gt  lt  script gt   lt  body gt    lt  html gt  x000D   x000D   x000D

User · Answer

I used the trigger set to hover and gave the container set to the  element and finally adding a placement of the box to right  This should be your setup      example   popover       html  true      trigger   hover       container    example       placement   right       content  function              return   lt div class  quot box quot  gt  lt  div gt               and  example css needs position relative  check the jsfiddle below  https   jsfiddle net 9qn6pw4p 1  Edited This fiddle has both links that work with no problems http   jsfiddle net davidchase03 FQE57 4

User · Answer

Vikas answer works perfectly for me  here I also add support for the delay  show   hide    var popover       example    var options         animation   true      html  true      trigger   manual       placement   right       delay   show  500  hide  100        popover      popover options       on  mouseenter   function               var t   this          var popover     this               setTimeout function                   if  popover is   hover                       popover popover  show                    popover siblings   popover   on  mouseleave   function                            t  popover  hide                                                 options delay show               on  mouseleave   function              var t   this          var popover     this            setTimeout function                  if  popover siblings   popover   length  amp  amp   popover siblings   popover   is   hover                        t  popover  hide                            options delay hide                  Also please pay attention I changed   if       popover hover   length      with   if  popover siblings   popover   length  amp  amp   popover siblings   popover   is   hover        so that it references exactly at that opened popover  and not any other  since now  through the delay  more than 1 could be open at the same time

User · Answer

I agree that the best way is to use the one given by  David Chase  Cu Ly  and others that the simplest way to do this is to use the container    this  property as follows    selectorString  each function        var  this     this      this popover       html  true      placement   quot top quot       container   this      trigger   quot hover quot       title   quot Popover quot       content   quot Hey  you hovered on element quot             I want to point out here that the popover in this case will inherit all properties of the current element  So  for example  if you do this for a  btn element bootstrap   you won t be able to select text inside the popover  Just wanted to record that since I spent quite some time banging my head on this

User · Answer

I have came after another solution to this   here is the code          selector   popover           html  true          trigger   manual           container    this  attr  id            placement   top           content  function                   return     lt div class  hover-hovercard  gt  lt  div gt                     on  mouseenter   function              var  this   this            this  popover  show              this  siblings   popover   on  mouseleave   function                     this  popover  hide                       on  mouseleave   function              var  this   this          setTimeout function                  if       popover hover   length                       this  popover  hide                            100

User · Answer

I know I m kinda late to the party but I was looking for a solution for this  and I bumped into this post  Here is my take on this  maybe it will help some of you  The html part   lt button type  quot button quot  class  quot btn btn-lg btn-danger quot  data-content  quot test quot  data-placement  quot right quot  data-toggle  quot popover quot  title  quot Popover title quot   gt Hover to toggle popover lt  button gt  lt br gt     with custom html stored in a separate element  using  quot data-target quot   lt button type  quot button quot  class  quot btn btn-lg btn-danger quot  data-target  quot  custom-html quot  data-placement  quot right quot  data-toggle  quot popover quot   gt Hover to toggle popover lt  button gt    lt div id  quot custom-html quot  style  quot display  none  quot  gt       lt strong gt Helloooo   lt  strong gt   lt  div gt   The js part    function              let popover     data-toggle  quot popover quot              let popoverId   function element                return   element  popover   data  bs popover   tip id                       popover  popover               trigger   manual               html  true              animation  false                     on  show bs popover   function                    hide all other popovers                 popover  popover  quot hide quot                        on  quot mouseenter quot   function                    add custom html from element             let target     this  data  target                  this  popover   data  bs popover   config content     target  html                    show the popover               this  popover  quot show quot                                     popoverId this   on  quot mouseleave quot        gt                     this  popover  quot hide quot                                on  quot mouseleave quot   function                 setTimeout      gt                    if      quot   quot    popoverId this     quot  hover quot   length                          this  popover  quot hide quot                                     100

User · Answer

function                     data-toggle    popover     popover                   placement   left                   html  true                  trigger     focus                  on  mouseenter   function                     var  this   this                    this  popover  show                      this  siblings   popover   on  mouseleave   function                            this  popover  hide                                       on  mouseleave   function                     var  this   this                  setTimeout function                         if       popover hover   length                               this  popover  hide                                            100

[jquery] How can I keep Bootstrap popovers alive while being hovered?

Examples related to jquery

Examples related to twitter-bootstrap

Examples related to popper.js