templating: Bootstrap tool tips not supported

Steps to Reproduce:

Fire up the skeleton navigation app (As per here:https://github.com/aurelia/skeleton-navigation)
Open welcom.html
- Add the following code to the end of the first name input:
  data-toggle="tooltip" data-placement="top" data-title="bootstrap tooltip" title="html tooltip"
Run the app
- Hover the mouse over the first name input. The tool tip shows as a plain html tool tip (not bootstrap).
- Expected: tool tip would have the back background and white text that is default for a bootstrap tooltip.

Just to be sure, I also added the following to the top the file (below <template>):

 <script src="../../../jspm_packages/github/components/jquery@2.1.4/jquery.js"></script>
 <script src="../../../jspm_packages/github/twbs/bootstrap@3.3.6/js/bootstrap.js"></script>
 <script>
    $(function() { $("[data-toggle='tooltip']").tooltip(); });
 </script>

I also tried adding this to index.html

I also added import 'bootstrap' to the welcome.js.

Nothing I did could get a bootstrap styled tooltip to show. Since other bootstrap classes work fine, I assume that this is an issue with the template’s support for the popup that is in a tool tip.

About this issue

Original URL
State: closed
Created 9 years ago
Comments: 16 (2 by maintainers)

Most upvoted comments

Bootstrap’s tooltip component requires javascript. Use a custom attribute to execute the tooltip javascript

import {customAttribute, inject} from 'aurelia-framework';
import $ from 'jquery';
import 'bootstrap';

@customAttribute('bootstrap-tooltip')
@inject(Element)
export class BootstrapTooltip {
  constructor(element) {
    this.element = element;
  }

  bind() {
    $(this.element).tooltip();
  }

  unbind() {
    ${this.element).tooltip('destroy');
  }
}

Then on the element, add the bootstrap-tooltip attribute:

<require from="./bootstrap-tooltip"></require>

<input bootstrap-tooltip data-toggle="tooltip" data-placement="top" data-title="bootstrap tooltip" title="html tooltip">

jdanyow on Dec 16, 2015

@jpravetz If you are using Bootstrap 4, “destroy” is now “dispose”. So your code would look like: this.$element.tooltip('dispose');

logansgraphicd on May 24, 2017

With tooltip="title.bind: ..." it works. I suggest extending @jdanyow solution to sth that allows dynamic title change:

@customAttribute('bootstrap-tooltip')
@inject(Element)
export class BootstrapTooltip {
    $element:any;
    @bindable title:string;

    constructor(element) {
        this.$element = $(element);
    }

    bind() {
        this.$element.tooltip({title: this.title})
    }

    unbind() {
        this.$element.tooltip('destroy');
    }

    titleChanged() {
        this.$element.data('bs.tooltip', false)
        this.$element.tooltip({title: this.title});
    }
}

<i class="icon-attention" bootstrap-tooltip="title.bind: msgs"

krostkowski on Jul 6, 2016