引导工具提示/弹出框未正确显示答案

【问题标题】：Bootstrap tooltip/popover not showing properly引导工具提示/弹出框未正确显示
【发布时间】：2016-01-09 21:49:42
【问题描述】：

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

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

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

（我使用nodejs安装必要的文件/依赖项->npm installnpm install bootstrapnpm 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>

带有工具提示的页面（.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 的摘录。

【问题讨论】：

我认为您的<script>...</script> 中缺少$('[data-toggle="tooltip"]').tooltip();。请参阅getbootstrap.com/javascript/#callout-tooltip-opt-in 了解更多信息。
@adilapapaya 我以前试过，但工具提示和弹出框都不能正常工作。在第二个代码提取中，您可以在底部看到$('[data-toggle="popover"]').popover();
如果你使用 ng-tooltip 或 ng-popover 等组件而不使用 jquery 会更好

标签： javascript node.js twitter-bootstrap-3 tooltip angular

【解决方案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 更改时都会执行，而不仅仅是第一次。第三个也是最好的但更复杂一点的方法是实现一个在页面开始渲染之前执行的方法，如果你在该方法中返回一个 Promise，页面将在渲染之前等待 Promise 完成，所以你可以返回一个承诺并解决承诺，直到您从服务中获得答案，这样 dom 将在控制器第一次加载时准备好我相信最后一种方法叫做 CanActivate 或类似的东西。

【讨论】：

如何从组件内部运行 JS 代码？以前从未做过或见过。
将示例添加到答案帖子中。
not working
您使用的是什么版本的引导程序？您在控制台中收到任何错误吗？（按 F12 > 控制台，选项卡查看）
我刚刚尝试过，它可以工作，在 js 代码和 html 中更改工具提示的弹出框，并摆脱所有相互覆盖的 lib 链接，您正在用 3.3.5 覆盖 3.3.6 ：<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">，与 jquery 相同，“tooltip.js”已经是 bootstrap.min.js 的一部分