Bootstrap tooltip/popover 显示不正确

Question

我正在使用 Angular 2 构建我的网络应用程序。当我尝试在图像或按钮上放置工具提示或弹出框时，我得到的是 default-looking tooltip 而不是 bootstrap。

我已经尝试了 basic W3Schools examples 并按照所示进行了所有操作，但它不起作用。

我认为我的问题在于 bootstrap.js 或 jQuery 的正确导入，但其他 bootstrap 项目（如按钮等）确实可以正常工作。

(我用nodejs安装必要的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" />-->

    <!-- Whosebug 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>

带工具提示的页面(.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();
    }
}

!编辑!

添加了用户的建议以及 running webpage source.

的摘录

Answer 1

您在模板中编写的 script 标记被忽略，运行您的 JS 代码来自组件内部，我建议您运行它在 ngOnInit() 方法，因为您正在实现 OnInit 接口。

这应该有效：

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

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

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

使用：

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

如此具体到您的项目：

您可以通过三个选项来修复它：一种是设置一个讨厌的超时，这样它就会启动工具提示，直到您从服务器收到响应并且它们已经实际呈现。第二个是找到一些类似于我们尝试的方法，每次 dom 更改时都会执行，而不仅仅是第一次。第三种也是最好但有点复杂的方法是实现一个在页面开始呈现之前执行的方法，如果你 return 在那个方法中有一个承诺，页面将在呈现之前等待承诺完成，所以你可以 return 承诺并解决承诺，直到你从服务中得到答案，这样 dom 将在控制器第一次加载时准备就绪我相信最后一个方法叫做 CanActivate 或类似的东西。

Bootstrap tooltip/popover 显示不正确

Bootstrap tooltip/popover not showing properly

javascript

node.js

twitter-bootstrap-3

tooltip

angular