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.