Bootstrap-tooltip in Aurelia

Question

I need to use bootstrap-tooltip in aurelia framework. For this, I have created a BootstrapTooltip attribute class.

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

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

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

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

This is the current code. But I am getting the error "Bootstrap_1.default is not a function"

Maybe this is because of the $, but not sure what's the reason...

This must be because you are importing $ from bootstrap. You should try changing it to import $ from 'jquery'; — Cristián Ormazábal, Jun 20 '19 at 13:47
Hi, @CristiánOrmazábal. Thanks for your reply. I tried using jquery, but also got error "$() doesn't have method tooltip" — vhurryharry, Jun 21 '19 at 05:29
How are you importing bootstrap and jquery in your project and which bundling method are you using? — Cristián Ormazábal, Jun 21 '19 at 12:02

score 1 · Accepted Answer · answered Jul 03 '19 at 05:15

Have a look at the dependencies in aurelia.json file and check if you set up bootstrap in your dependencies to depend of jquery.

{
    "name": "bootstrap",
    "path": "../node_modules/bootstrap/dist",
    "main": "js/bootstrap.min",
    "deps": [ "jquery" ],
    "exports": "$"
}

This should extend the global jquery object "$" to have the bootstrap functionality, including the tooltip.

Finally remove the import $ from "bootstrap", as you are trying to import $ from bootstrap, when it's already globally defined, that may be causing the problem.

Bootstrap-tooltip in Aurelia

1 Answers1