Bootstrap tooltip/popover not showing properly

Question

I'm using Angular 2 to build my web application. When I try to put a tooltip or popover on an image or button, I get the default-looking tooltip instead of the bootstrap one.

I've tried the basic W3Schools examples and did everything as shown, yet it doesn't work.

I believe my problem lies with the correct imports of the bootstrap.js or jQuery, but other bootstrap items like buttons etc. do work properly.

(I use nodejs to install the necessary files/dependencies -> npm install npm install bootstrap npm install jquery )

index.html

<html>
<head>
    <base href="/"><!--Without this tag, the browser may not be be able to load resources (images, css, scripts) when "deep linking" into the app. Bad things could happen when someone pastes an application link into the browser's address bar or clicks such a link in an email link. -->
    <title>Factory</title>
    <link type="text/css" rel="stylesheet" href="/css/styles.css">

    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="node_modules/rxjs/bundles/Rx.js"></script>
    <script src="node_modules/angular2/bundles/angular2.dev.js"></script>
    <script src="node_modules/angular2/bundles/router.dev.js"></script>
    <script src="/node_modules/angular2/bundles/http.dev.js"></script>

    <!--<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">-->
    <!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>-->
    <!--<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>-->
    <!--<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />-->

    <!-- stackoverflow suggested settings -->
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

    <script>
        System.config({
            packages: {
                app: {
                    format: 'register',
                    defaultExtension: 'js'
                }
            }
        });
        System.import('app/boot')
                .then(null, console.error.bind(console));
    </script>
</head>
<body>
<my-app></my-app>
</body>
</html>

page-with-tooltip(.ts)

import {Component} from "angular2/core";
import ... from ...;
import ... from ...;
...

@Component({
    template: `

<div *ngIf="hall" class="container">
    <h2>Detail van hal <small>{{hall.name}}</small></h2>
    <a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a>
    <div class="container">
        <div class="hall-box-single">
            <div class="hall-box"
                [style.width]="hall.areaWidth*4"
                [style.height]="hall.areaHeight*4">
                <div class="image-container">
                <div *ngFor="#item of hall.items">
                    <a data-toggle="tooltip" title="Popover title">
                    <img [src]="item.image"
                         [style.left]="item.posX"
                         [style.top]="item.posY"/>
                     </a>
                </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    $(document).ready(function(){
        $('[data-toggle="tooltip"]').tooltip();
    });
</script>
`})

export class HallDetailComponent implements OnInit {
    ...
    constructor(...) {
        ...
    }

    ngOnInit() {
        ...
        (<any>$('[data-toggle="tooltip"]')).tooltip();
        $('[data-toggle="tooltip"]').tooltip();
    }
}

!Edit!

Added suggestions from users as well as an extract of the running webpage source .

Answer 1

The script tag you wrote in your template is getting ignored, run your JS code from inside the component instead, I suggest you to run it in the ngOnInit() method since you are implementing the OnInit interface.

This should work:

@Component({
    selector: 'app',
    template: `

        <a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a>

    `
})
export class AppComponent{
    ngAfterViewInit(){
        $('[data-toggle="tooltip"]').tooltip();
    }
}

using:

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

So specific to your project:

You have three options to fix it: One is to set a nasty timeout so it initiates the tooltips until you get a response back from the server and they have actually rendered. The second is to find some method like the ones we try that gets executed everytime the dom changes, not just the first time. The third and best but a bit more complicated is by implementing a method that gets executed before the page starts rendering, and if you return a promise in that method, the page will wait for the Promise to get done before rendering, so you can return a promise and resolve the promise until you get the answer from the service, that way the dom will be ready the first time the controller loads I believe the last method is called CanActivate or something like that.

Bootstrap tooltip/popover not showing properly

Question

1 answers

solution1
4 ACCPTED 2016-01-09 22:17:25

Bootstrap tooltip/popover not showing properly

Question

1 answers

solution1 4 ACCPTED 2016-01-09 22:17:25

solution1
4 ACCPTED 2016-01-09 22:17:25