Change Twitter Bootstrap Tooltip content on click

Question

I have a tooltip on an anchor element  that sends an AJAX request on click  This element has a tooltip  from Twitter Bootstrap   I want the tooltip content to change when the AJAX request returns successfully  How can I manipulate the tooltip after initiation

User · Answer

I couldn t get any of the answers working  here s a workaround           element  attr  aria-describedby      tooltip-inner   html newTitle

User · Answer

You can just change the data-original-title using the following code     element  attr  data-original-title   newValue

User · Answer

I only tested this in bootstrap 4  amp  w o calling  show    el tooltip  hide   attr  data-original-title    message

User · Answer

for Bootstrap 4     element  attr  title    Copied    tooltip   fixTitle   tooltip  show   attr  title    Copy to clipboard   tooltip   fixTitle

User · Answer

Destroy any pre-existing tooltip so we can repopulate with new tooltip content    element  tooltip  destroy          element  tooltip       title  message

User · Answer

Bootstrap 4     topic 1   tooltip  dispose   tooltip  title   Goodbye    tooltip  show    https   getbootstrap com docs 4 1 components tooltips  tooltipdispose  x000D   x000D      topic 1   tooltip  title   Hello    tooltip  show    setTimeout  function           topic 1   tooltip  dispose   tooltip  title   Goodbye    tooltip  show       5000   x000D   topic 1     border  1px solid red    margin  50px    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt     lt link rel  stylesheet  href  https   stackpath bootstrapcdn com bootstrap 4 1 2 css bootstrap min css  integrity  sha384-Smlep5jCw wG7hdkwQ Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm e9B  crossorigin  anonymous  gt     lt script src  https   cdnjs cloudflare com ajax libs popper js 1 14 3 umd popper min js  integrity  sha384-ZMP7rVo3mIykV 2 9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK l8WvCWPIPm49  crossorigin  anonymous  gt  lt  script gt     lt script src  https   stackpath bootstrapcdn com bootstrap 4 1 2 js bootstrap min js  integrity  sha384-o RDsa0aLu  PJvFqy8fFScvbHFLtbvScb8AjopnFD iEQ7wo CG0xlczd 2O em  crossorigin  anonymous  gt  lt  script gt    lt div id  topic 1  gt Topic 1 lt  div gt  x000D   x000D   x000D

User · Answer

Just found this today whilst reading the source code  So   tooltip string  calls any function within the Tooltip class  And if you look at Tooltip fixTitle  it fetches the data-original-title attribute and replaces the title value with it  So we simply do    element  tooltip  hide              attr  data-original-title   newValue             tooltip  fixTitle              tooltip  show     and sure enough  it updates the title  which is the value inside the tooltip  A shorter way    element  attr  title    NEW TITLE              tooltip  fixTitle              tooltip  show

User · Answer

I think Mehmet Duran is almost right  but there were some problems when using multiple classes with the same tooltip and their placement  The following code also avoids js errors checking if there is any class called  tooltip class   Hope this helps   if  jQuery   tooltip class   0                 jQuery   tooltip class                attr  title    New Title                 attr  data-placement    right                tooltip  fixTitle                tooltip  hide

User · Answer

Change the text by altering the text in the element directly   does not update the tooltip position        tooltip-inner    element next    html newHtml       tooltip-inner    element next    text newText     Change the text by destroying the old tooltip  then creating and showing a new one   Causes the old one to fade out and the new one to fade in    element  tooltip  destroy    tooltip          Repeat previous options      title  newText      tooltip  show      I m using the top method to both animate the  Saving   message  using  amp nbsp so the tooltip does not change in size  and to change the text to  Done    plus padding  when the request completes    element tooltip     placement   left     title   Saving        trigger   manual      tooltip  show     var parent    element parent    var interval id   setInterval function        var text       tooltip-inner   parent  html        switch text        case  Saving  amp nbsp  amp nbsp    text    Saving   amp nbsp    break      case  Saving   amp nbsp    text    Saving      break      case  Saving      text    Saving  amp nbsp  amp nbsp    break                tooltip-inner   parent  html text      250    send request  function           When the request is complete     clearInterval interval id           tooltip-inner   parent  html  Done  amp nbsp  amp nbsp  amp nbsp  amp nbsp         setTimeout function              element tooltip  hide           1500    Show  Done   for a bit

User · Answer

In Bootstrap 3 it is sufficient to call elt attr  data-original-title    Foo   as changes in the  data-original-title  attribute already trigger changes in the tooltip display   UPDATE  You can add  tooltip  show   to show the changes immediately  you need not to mouseout and mouseover target to see the change in the title  elt attr  data-original-title    Foo   tooltip  show

User · Answer

this  attr  data-original-title    click here to publish           tooltip  fixTitle           tooltip  show      Useful if you need to change a tooltip s text after it has been initialized with attr  data-original-title

User · Answer

In bootstrap 4 I just use   el  tooltip  dispose    then recreate as normal  So you can put the dispose before a function that creates a tooltip to be sure it doesn t double up   Having to check the state and tinker with values seems less friendly

User · Answer

Thanks this code was very helpful for me  i found it effective on my projects    element  attr  title    message   tooltip  fixTitle   tooltip  show

User · Answer

This worked for me   bootstrap 3 3 6  jquery 1 11 3    lt a id  alertTooltip  href     data-html  true  class  tooltip  data-toggle  tooltip  title  Tooltip message  gt  lt  a gt    lt script gt        alertTooltip   attr  title    Tooltip new  lt br   gt  message   tooltip  fixTitle     lt  script gt    The attribute data-html  true  allow to use html on the tooltip title

User · Answer

For BS4  and BS3 with minor changes     after hours of searching and trials  i came up with the most reliable solution for this problem and it even solves the problem of opening more than one  tooltip or popover  at the same time  and the problem of opening automatically after losing focus  etc    x000D   x000D      data-toggle  tooltip     tooltip   x000D    trigger   hover  x000D     on  shown bs tooltip   function     x000D    var link     this   x000D    var data       x000D    data      lt ul style  list-style-type none margin 0 padding 0 text-align left font-size 12px  gt    x000D    data       lt li gt Sherif Salah lt  li gt    x000D    data       lt li gt Muhammad Salah lt  li gt    x000D    data       lt li gt and a gazillion more    lt  li gt    x000D    data      lt  ul gt    x000D    link attr  data-original-title   data   x000D    setTimeout function     x000D      if  link is   hover      x000D        link tooltip  dispose   tooltip  show    x000D        x000D       1000   x000D      x000D   lt  doctype html gt  x000D   lt html lang  en  gt  x000D   x000D   lt head gt  x000D     lt meta charset  utf-8  gt  x000D     lt meta name  viewport  content  width device-width  initial-scale 1  shrink-to-fit no  gt  x000D     lt link href  https   maxcdn bootstrapcdn com bootstrap 4 0 0 css bootstrap min css  rel  stylesheet    gt  x000D   lt  head gt  x000D   x000D   lt body gt  x000D     lt div class  card  gt  x000D       lt div class  card-body text-center  gt  x000D         lt a href  JavaScript void 0    class  btn btn-sm btn-link  data-toggle  tooltip  data-placement  top  data-html  true  title  Loading     gt gazillion lt  a gt  x000D       lt  div gt  x000D     lt  div gt  x000D     lt script src  https   code jquery com jquery-3 2 1 slim min js  gt  lt  script gt  x000D     lt script src  https   cdnjs cloudflare com ajax libs popper js 1 12 9 umd popper min js  gt  lt  script gt  x000D     lt script src  https   maxcdn bootstrapcdn com bootstrap 4 0 0 js bootstrap min js  gt  lt  script gt  x000D   lt  body gt  x000D   x000D   lt  html gt  x000D   x000D   x000D

User · Answer

You can set content on tooltip call with a function                myelement   tooltip                title   function                     return   lt h2 gt       tooltipcontainer   html     lt  h2 gt                                You don t have to use only the title of the called element

User · Answer

For bootstrap 3 x  This seems like cleanest solution     element     attr  data-original-title    New title   tooltip  show     Show is used to make title update right away and not wait for tooltip to be hidden and shown again

User · Answer

I m using this easy way out    x000D   x000D    document  ready function     x000D          btn   prop  title    Click to copy your shorturl    x000D      x000D   x000D  function myFunction    x000D      btn  tooltip  hide    x000D      btn  attr  data-original-title    Test    x000D      btn  tooltip  show    x000D      x000D   x000D   x000D

User · Answer

heres a nice solution if you want to change the text without closing and reopening the tooltip     element  attr  title   newTitle             tooltip  fixTitle              data  bs tooltip               tip find   tooltip-inner              text newTitle    this way  text replaced without closing tooltip  doesnt reposition  but if you are doing a one word change etc it should be fine   and when you hover off   back on tooltip  it is still updated     this is bootstrap 3  for 2 you probably have to change data class names

User · Answer

Here is update for the Bootstrap 4   var title    Foo   elt attr  data-original-title   title   elt tooltip  update    elt tooltip  show      But the best way is to do like this   var title    Foo   elt attr  title   title   elt attr  data-original-title   title   elt tooltip  update    elt tooltip  show      or inline   var title    Foo   elt attr  title   title  attr  data-original-title   title  tooltip  update   tooltip  show      From the UX side you just see that text is changed with no fading or hide show effects and there is no needs for the  fixTitle

User · Answer

The following worked the best for me  basically I m scrapping any existing tooltip and not bothering to show the new tooltip  If calling show on the tooltip like in other answers  it pops up even if the cursor isn t hovering above it   The reason I went for this solution is that the other solutions  re-using the existing tooltip  led to some strange issues with the tooltip sometimes not showing when hovering the cursor above the element   function updateTooltip element  tooltip        if  element data  tooltip      null            element tooltip  hide            element removeData  tooltip              element tooltip           title  tooltip

User · Answer

you can use this code to hide the tool tip change its title and show the tooltip again  when the ajax request returns successfully     element  tooltip  hide      element  attr  title   this is new title      element  tooltip  fixTitle    setTimeout function        element  tooltip  show      500

User · Answer

if you have set the title attribute in HTML then use on click of the icon or button   this  attr  title  newValue

User · Answer

This works if the tooltip has been instantiated  possibly with javascript        tooltip id   data  tooltip   options title  New value        tooltip id   tooltip  hide   tooltip  show

User · Answer

With Tooltip object Boostrap      element  attr  data-original-title    New value      element  data  bs tooltip   tip   find   tooltip-inner   text  New value

User · Answer

you can update the tooltip text without actually calling show hide     myEl       attr  title   newTitle       tooltip  fixTitle        tooltip  setContent

[jquery] Change Twitter Bootstrap Tooltip content on click

Examples related to jquery

Examples related to twitter-bootstrap

Examples related to tooltip