How do I bind Twitter Bootstrap tooltips to dynamically created elements

Question

I m using Twitter bootstrap tooltips with javascript like the following      a rel tooltip    tooltip      My markup looks like this    lt a rel  tooltip  title  Not implemented  class  btn  gt  lt i class  icon-file  gt  lt  i gt  lt  a gt    This works fine  but I add  lt a gt  elements dynamically and the tooltips aren t showing up for those dynamic elements   I know it s because I only bind  tooltip   once when the document is finished loaded with the typical jquery   document  ready function   functionality   How can I bind this to dynamically created elements   Usually I would do this via the jquery live   method   However  what is the event that I use to bind   I m just not sure how to hook up the bootstrap  tooltip   with jquery  live     I ve found one way to make this work is something like this      Add new  rows  when plus sign is clicked       a add   live  click   function          var clicked li     this  parent  li        var clone   clicked li clone         clone find   input   each function               this  val                   clicked li after clone          a rel tooltip    tooltip          This works  but seems kind of hackish   I m also calling the exact same  tooltip   line in the   ready  call   So  do the elements that exist when the page first loads and match that selector end up with the tooltip twice   I don t see any problems with this approach   I m just looking for a best practice or understanding of the behavior

User · Answer

Rather than search it in full Body  One could just use dynamic title option already available in such scenarios I think    btn tooltip     title  function        return   this  attr  title

User · Answer

If you have multiple tooltip configurations that you want to initialise  this works well for me       body   tooltip       selector    data-toggle  tooltip          You can then set the property on individual elements using data attributes

User · Answer

In Bootstrap 5  which doesn t use jQuery  you can do this   x000D   x000D  const btn   document createElement  button    btn innerHTML    Click me   btn dataset  toggle      tooltip   btn dataset  placement      top   btn title    Your Tooltip Here   new bootstrap Tooltip btn    document getElementById  parent   appendChild btn   x000D   lt link href  https   cdn jsdelivr net npm bootstrap 5 0 0-alpha3 dist css bootstrap min css  rel  stylesheet  integrity  sha384-CuOF 2SnTUfTwSZjCXf01h7uYhfOBuxIhGKPbfEJ3 FqH s6cIFN9bGr1HmAg4fQ  crossorigin  anonymous  gt   lt script src  https   cdn jsdelivr net npm bootstrap 5 0 0-alpha3 dist js bootstrap bundle min js  integrity  sha384-popRpmFF9JQgExhfw5tZT4I9 CI5e2QcuUZPOVXb1m7qUmeR2b50u YFEYe1wgzy  crossorigin  anonymous  gt  lt  script gt   lt div id  parent  gt  lt  div gt  x000D   x000D   x000D

User · Answer

I ve posted longer answer here  https   stackoverflow com a 20877657 207661  TL DR  You need only one line of code that runs in document ready event     document body  tooltip   selector    title         Other more complicated code suggested in other answers don t seem necessary  I ve tested this with Bootstrap 3 0

User · Answer

For me  this js reproduces the same problem that happens with Paola  My solution     document body  tooltip  selector    title      on  click mouseenter mouseleave    title    function ev          this  tooltip  mouseenter      ev type   show    hide

User · Answer

For me  only catching the mouseenter event was a bit buggy  and the tooltip was not showing hiding properly   I had to write this  and it is now working perfectly     document  on  mouseenter    rel tooltip    function          this  tooltip  show           document  on  mouseleave    rel tooltip    function          this  tooltip  hide

User · Answer

I found a combination of these answers gave me the best outcome - allowing me to still position the tooltip and attach it to the relevant container      body   on  mouseenter     rel tooltip    function      var el     this     if  el data  tooltip       undefined        el tooltip         placement  el data  placement       top         container  el data  container      false               el tooltip  show            body   on  mouseleave     rel tooltip    function        this  tooltip  hide          Relevant HTML    lt button rel  tooltip  class  btn  data-placement  bottom  data-container   some-parent  title  Show Tooltip  gt       lt i class  icon-some-icon  gt  lt  i gt   lt  button gt

User · Answer

Try this one       body   tooltip       selector    rel tooltip

[jquery] How do I bind Twitter Bootstrap tooltips to dynamically created elements?

Examples related to jquery

Examples related to twitter-bootstrap