Bootstrap 4 Tooltips with Aurelia CLI

This post shows how to use Bootstrap 4 Tooltips in an Aurelia project, using the Aurelia CLI.

aurelia-bootstrap4-tooltip

Create a new project using the Aurelia CLI. Choose the default options.

au new

Install Bootstrap 4, jQuery, and Tether.

npm install bootstrap@4.0.0-alpha.6 --save
npm install jquery@3.2.1 --save
nom install tether@1.4.0 --save

The commands above download the libraries into node_modules. The –save option lists them as dependencies in package.json.

Now we have to tell Aurelia to include these libraries when bundling our project. Aurelia CLI creates two javascript files, app-bundle.js and vendor-bundle.js. We can configure what goes in these bundles in aurelia.json.

Open aurelia.json, found in the aurelia_project directory. Locate the section in the file that configures vendor-bundle.js. Add the Tether library to the prepend array. Add jQuery and Bootstrap to the dependencies array. For some reason the Tether library doesn’t work as a dependency (I’ll update this post if I figure out why). The changes look like this:

"bundles": [
    {
    "name": "app-bundle.js",
    "source": [
        "[**/*.js]",
        "**/*.{css,html}"
    ]
    },
    {
    "name": "vendor-bundle.js",
    "prepend": [
        "node_modules/bluebird/js/browser/bluebird.core.js",
        "node_modules/aurelia-cli/lib/resources/scripts/configure-bluebird.js",
        "node_modules/tether/dist/js/tether.min.js",
        "node_modules/requirejs/require.js"
    ],
    "dependencies": [
        "jquery",
        {
        "name": "bootstrap",
        "path": "../node_modules/bootstrap/dist",
        "main": "js/bootstrap.min",
        "deps": ["jquery"],
        "resources": [
            "css/bootstrap.css"
        ]
        },
        "aurelia-binding",

Add a Bootstrap Tooltip Button to app.html. Also import the bootstrap css using a require element.

<template>
  <require from="bootstrap/css/bootstrap.css"></require>
  <button type="button" class="btn btn-secondary" data-toggle="tooltip"data-placement="bottom" data-html="true" title.bind="message">
  Button with Tooltip
  </button>
</template>

Import bootstrap in app.js. When the view is attached to the DOM, enable tooltips using the tooltip method that bootstrap has added to the jQuery $ global variable.

import 'bootstrap';
export class App {
  constructor() {
    this.message = 'Hello World!';
  }
  attached() {
    $('[data-toggle="tooltip"]').tooltip()
  }
}

Run the project:

au run

The tooltip appears when mousing over the button. View a demo here. Download the source files.

Links:
- Getting Started with Aurelia CLI and Boostrap
- How to add Tether in Aurelia-CLI to use with Bootstrap 4

This entry was posted in Uncategorized. Bookmark the permalink.
  • Vitali Danilow

    seems not to work with TS
    `Error: src/app.ts(32,9): error TS2304: Cannot find name ‘$’`

    • Jerry T

      That’s the problem I’m having with Aurelia – too many stacks to choose from and when finding tips online it often only applies to one stack. You have JS, TS, JSPM, and Webpack and combinations thereof. When reading a blog post it will apply to one of those combinations but often not the others. The Aurelia team has too many stacks to maintain and test and that seems to mean that JSPM is kept up to date and WebPack trails behind with clearing bug fixes. I think it would have been better in the beginning to pick one stack and just focus on keeping it bug free and optimized.