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...

Answer 1

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.