Using Bootstrap Tooltip with AngularJS

Question

I am trying to use the Bootstrap tooltip in an app of mine  My app is using AngularJS Currently  I have the following    lt button type  button  class  btn btn-default           data-toggle  tooltip  data-placement  left          title  Tooltip on left  gt              Tooltip on left  lt  button gt    I think I need to use       data-toggle tooltip    tooltip      However  I m not sure  Even when I add the line above though  my code doesn t work  I m trying to avoid using UI bootstrap as it has more than I need  However  if I had to include just the tooltip piece  I d be open to that  Yet  I can t figure out how to do that    Can someone show me how to get the Bootstrap Tooltip working with AngularJS

User · Answer

AngularStrap doesn t work in IE8 with angularjs version 1 2 9 so not use this if your application needs to support IE8

User · Answer

for getting tooltips to refresh when the model changes  i simply use data-original-title instead of title   e g    lt i class  fa fa-gift  data-toggle  tooltip  data-html  true  data-original-title   getGiftMessage gift     gt  lt  i gt   note that i m initializing use of tooltips like this    lt script type  text javascript  gt        function                 body   tooltip   selector    data-toggle tooltip               lt  script gt    versions    AngularJS 1 4 10 bootstrap 3 1 1 jquery  1 11 0

User · Answer

If you re building an Angular app  you can use jQuery  but there is a lot of good reasons to try to avoid it in favor of more angular driven paradigms   You can continue to use the styles provided by bootstrap  but replace the jQuery plugins with native angular by using UI Bootstrap Include the Boostrap CSS files  Angular js  and ui Bootstrap js   lt link href  quot   netdna bootstrapcdn com bootstrap 3 1 1 css bootstrap min css quot  rel  quot stylesheet quot  gt   lt script src  quot https   code angularjs org 1 2 20 angular js quot  gt  lt  script gt   lt script src  quot   angular-ui github io bootstrap ui-bootstrap-tpls-0 11 0 js quot  gt  lt  script gt   Make sure you ve injected ui bootstrap when you create your module like this  var app   angular module  plunker     ui bootstrap      Then you can use angular directives instead of data attributes picked up by jQuery   lt button type  quot button quot  class  quot btn btn-default quot           title  quot Tooltip on left quot  data-toggle  quot tooltip quot  data-placement  quot left quot          tooltip  quot Tooltip on left quot  tooltip-placement  quot left quot   gt    Tooltip on left  lt  button gt   Demo in Plunker  Avoiding UI Bootstrap jQuery min js  94kb    Bootstrap min js  32kb  is also giving you more than you need  and much more than ui-bootstrap min js  41kb   And time spent downloading the modules is only one aspect of performance  If you really wanted to only load the modules you needed  you can  quot Create a Build quot  and choose tooltips from the Bootstrap-UI website   Or you can explore the source code for tooltips and pick out what you need  Here a minified custom build with just the tooltips and templates  6kb

User · Answer

Have you included the Bootstrap JS and jQuery      lt script src  http   code jquery com jquery-1 10 1 min js  gt  lt  script gt   lt script src    netdna bootstrapcdn com bootstrap 3 0 2 js bootstrap min js  gt  lt  script gt    If you don t already load those  then Angular UI  http   angular-ui github io bootstrap   may not be much overhead   I use that with my Angular app  and it has a Tooltip directive   Try using tooltip  tiptext     lt button type  button  class  btn btn-default           data-toggle  tooltip  data-placement  left          title  Tooltip on left          tooltip  This is a Bootstrap tooltip          tooltip-placement  left   gt              Tooltip on left  lt  button gt

User · Answer

In order to get the tooltips to work in the first place  you have to initialize them in your code  Ignoring AngularJS for a second  this is how you would get the tooltips to work in jQuery     document  ready function            data-toggle tooltip    hover function               on mouseenter           this  tooltip  show           function               on mouseleave           this  tooltip  hide                  This will also work in an AngularJS app so long as it s not content rendered by Angular  eg  ng-repeat   In that case  you need to write a directive to handle this  Here s a simple directive that worked for me   app directive  tooltip   function        return           restrict   A           link  function scope  element  attrs               element hover function                       on mouseenter                 element tooltip  show                   function                       on mouseleave                 element tooltip  hide                                           Then all you have to do is include the  tooltip  attribute on the element you want the tooltip to appear on    lt a href   0  title  My Tooltip   data-toggle  tooltip  data-placement  top  tooltip gt My Tooltip Link lt  a gt    Hope that helps

User · Answer

install the dependencies   npm install jquery --save npm install tether --save npm install bootstrap version --save    next  add scripts in your angular-cli json   scripts                 node modules jquery dist jquery min js               node modules tether dist js tether js               node modules bootstrap dist js bootstrap min js            script js          then  create a script js      data-toggle tooltip    tooltip      now restart your server

User · Answer

You can create a simple directive like this   angular module  myApp           directive  myTooltip   function            return               restrict   A               link  function scope  element                   element tooltip                                      Then  add your custom directive where is necessary    lt button my-tooltip gt  lt  button gt

User · Answer

You can do this with AngularStrap which     is a set of native directives that enables seamless integration of Bootstrap 3 0  into your AngularJS 1 2  app      You can inject the entire library like this   var app   angular module  MyApp     mgcrea ngStrap        Or only pull in the tooltip feature like this    var app   angular module  MyApp     mgcrea ngStrap tooltip        Demo in Stack Snippets   x000D   x000D  var app   angular module  MyApp     mgcrea ngStrap       x000D   lt link href    cdnjs cloudflare com ajax libs twitter-bootstrap 3 3 4 css bootstrap min css  rel  stylesheet  gt  x000D   lt script src    cdnjs cloudflare com ajax libs angular js 1 3 15 angular min js  gt  lt  script gt  x000D   lt script src    cdnjs cloudflare com ajax libs angular-strap 2 1 2 angular-strap min js  gt  lt  script gt  x000D   lt script src    cdnjs cloudflare com ajax libs angular-strap 2 1 2 angular-strap tpl min js  gt  lt  script gt  x000D   x000D   lt div ng-app  MyApp  class  container   gt  x000D   x000D     lt button type  button   x000D            class  btn btn-default   x000D            data-trigger  hover   x000D            data-placement  right  x000D            data-title  Tooltip on right  x000D            bs-tooltip gt  x000D      MyButton x000D     lt  button gt  x000D   x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Because of the tooltip function  you have to tell angularJS that you are using jQuery   This is your directive   myApp directive  tooltip   function          return           restrict   A           link  function  scope  element  attrs                element on  mouseenter   function                      jQuery noConflict                     function                             element 0   tooltip  show                       jQuery                                          and this is how to use the directive       lt a href     title  ToolTip   data-toggle  tooltip  tooltip gt  lt  a gt

User · Answer

easiest way   add     data-toggle tooltip    tooltip    to the concerned controller

User · Answer

impproving  aStewartDesign answer    directive  tooltip   function      return       restrict   A       link  function scope  element  attrs         element hover function            element tooltip  show             function            element tooltip  hide                               There s no need for jquery  its a late anwser but I figured since is the top voted one  I should point out this

User · Answer

Simple Answer - using UI Bootstrap  ui bootstrap tooltip   There seem to be a bunch of very complex answers to this question  Here s what worked for me    Install UI Bootstrap -   bower install angular-bootstrap Inject UI Bootstrap as a dependency - angular module  myModule     ui bootstrap     Use the uib-tooltip directive in your html       lt button class  btn btn-default          type  button          uib-tooltip  I m a tooltip   gt       I m a button   lt  button gt

User · Answer

I wrote a simple Angular Directive that s been working well for us    Here s a demo  http   jsbin com tesido edit html js output   Directive  for Bootstrap 3       registers native Twitter Bootstrap 3 tooltips app directive  bootstrapTooltip   function       return function scope  element  attrs        attrs  observe  title  function title            Destroy any existing tooltips  otherwise new ones won t get initialized        element tooltip  destroy             Only initialize the tooltip if there s text  prevents empty tooltips        if  jQuery trim title   element tooltip               element on   destroy   function           element tooltip  destroy          delete attrs   observers  title                      Note  If you re using Bootstrap 4  on lines 6  amp  11 above you ll need to replace tooltip  destroy   with tooltip  dispose    Thanks to user1191559 for this upadate   Simply add bootstrap-tooltip as an attribute to any element with a title   Angular will monitor for changes to the title but otherwise pass the tooltip handling over to Bootstrap   This also allows you to use any of the native Bootstrap Tooltip Options as data- attributes in the normal Bootstrap way   Markup     lt div bootstrap-tooltip data-placement  left  title  Tooltip on left  gt          Tooltip on left  lt  div gt    Clearly this doesn t have all the elaborate bindings  amp  advanced integration that AngularStrap and UI Bootstrap offer  but it s a good solution if you re already using Bootstrap s JS in your Angular app and you just need a basic tooltip bridge across your entire app without modifying controllers or managing mouse events

User · Answer

Only read this if you are assigning tooltips dynamically  i e   lt div tooltip    obj somePropertyThatMayChange        gt  lt  div gt   I had an issue with dynamic tooltips that were not always updating with the view  For example  I was doing something like this   This didn t work consistently   lt div ng-repeat  person in people  gt       lt span data-toggle  tooltip  data-placement  top  title     person tooltip     gt           person name         lt  span gt    lt  div gt     And activating it as so     timeout function         document  tooltip   selector    data-toggle  tooltip          1500    However  as my people array would change my tooltips wouldn t always update  I tried every fix in this thread and others with no luck  The glitch seemed to only be happening around 5  of the time  and was nearly impossible to repeat   Unfortunately  these tooltips are mission critical for my project  and showing an incorrect tooltip could be very bad    What seemed to be the issue  Bootstrap was copying the value of the title property to a new attribute  data-original-title and removing the title property  sometimes  when I would activate the toooltips  However  when my title    person tooltip    would change the new value would not always be updated into the property data-original-title  I tried deactivating the tooltips and reactivating them  destroying them  binding to this property directly    everything  However each of these either didn t work or created new issues  such as the title and data-original-title attributes both being removed and un-bound from my object    What did work  Perhaps the most ugly code I ve ever pushed  but it solved this small but substantial problem for me  I run this code each time the tooltip is update with new data     timeout function             data-toggle  tooltip     each function index             sometimes the title is blank for no apparent reason  don t override in these cases        if    this  attr  title   length  gt  0               this   attr  data-original-title     this  attr  title                          timeout function              finally  activate the tooltips         document  tooltip   selector    data-toggle  tooltip              500      1500     What s happening here in essence is     Wait some time  1500 ms  for the digest cycle to complete  and the titles to be updated   If there s a title property that is not empty  i e  it has changed   copy it to the data-original-title property so it will be picked up by Bootstrap s toolips  Reactivate the tooltips   Hope this long answer helps someone who may have been struggling as I was

User · Answer

You can use selector option for dynamic single page applications   jQuery function            document  tooltip           selector    data-toggle  tooltip                     if a selector is provided  tooltip objects will be delegated to the   specified targets  In practice  this is used to enable dynamic HTML   content to have tooltips added

User · Answer

Please remember one thing if you want to use bootstrap tooltip in angularjs is order of your scripts if you are using jquery-ui as well  it should be    jQuery jQuery UI Bootstap   It is tried and tested

User · Answer

Try the Tooltip  ui bootstrap tooltip   See Angular directives for Bootstrap   lt button type  button  class  btn btn-default   tooltip-placement  bottom  uib-tooltip  tooltip message  gt Test lt  button gt   It is recommended to avoid JavaScript code on the top of AngularJS

User · Answer

x000D   x000D  var app   angular module  MyApp     mgcrea ngStrap       x000D   lt link href    cdnjs cloudflare com ajax libs twitter-bootstrap 3 3 4 css bootstrap min css  rel  stylesheet  gt  x000D   lt script src    cdnjs cloudflare com ajax libs angular js 1 3 15 angular min js  gt  lt  script gt  x000D   lt script src    cdnjs cloudflare com ajax libs angular-strap 2 1 2 angular-strap min js  gt  lt  script gt  x000D   lt script src    cdnjs cloudflare com ajax libs angular-strap 2 1 2 angular-strap tpl min js  gt  lt  script gt  x000D   x000D   lt div ng-app  MyApp  class  container   gt  x000D   x000D     lt button type  button   x000D            class  btn btn-default   x000D            data-trigger  hover   x000D            data-placement  right  x000D            data-title  Tooltip on right  x000D            bs-tooltip gt  x000D      MyButton x000D     lt  button gt  x000D   x000D   lt  div gt  x000D   x000D   x000D

User · Answer

The best solution I ve been able to come up with is to include an  onmouseenter  attribute on your element like this    lt button type  button  class  btn btn-default       data-placement  left      title  Tooltip on left      onmouseenter    this  tooltip  show    gt   lt  button gt

[angularjs] Using Bootstrap Tooltip with AngularJS

Examples related to angularjs

Examples related to twitter-bootstrap

Examples related to twitter-bootstrap-tooltip