Bootstrap 4 Tooltips with Aurelia CLI

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


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": [
    "name": "vendor-bundle.js",
    "prepend": [
    "dependencies": [
        "name": "bootstrap",
        "path": "../node_modules/bootstrap/dist",
        "main": "js/bootstrap.min",
        "deps": ["jquery"],
        "resources": [

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

  <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

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() {

Run the project:

au run

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

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