javascript - Bootstrap 工具提示看起来很简单

Question

我正在尝试获得比工具提示通常具有的纯文本具有更多样式的工具提示。

我看到 Twitter Bootstrap 工具提示是黑色、白色文本，有箭头等。

我的工具提示如下所示:

我已读到要解决此问题，我需要添加以下内容:

<script>
   $(function () { $("[data-toggle='tooltip']").tooltip(); });
</script>

我这样做了，但没有效果。

我认为可能影响它的唯一事情是这是一个 Aurelia 应用程序，而我正在 <template> 中执行此操作。 .

我还可以检查其他内容以了解为什么这不起作用？

代码:

<template>
     <script src="myPathToJQuery/jquery@2.1.4/jquery.js"></script>
     <script src="myPathToBootstrap/twbs/bootstrap@3.3.6/js/bootstrap.js"></script>
    <button type="button" class="btn btn-default" data-toggle="tooltip"
           data-placement="top" data-html="true" title="<b>Tooltip</b> <em>on </em> right">
        Tooltip on right
    </button>

    <script>
        $(function() { $("[data-toggle='tooltip']").tooltip(); });
    </script>
</template>

Answer 1

您的代码中有一个小错误

ata-placement="top"

您错过了数据放置中的 D 字母，您的代码应该是:

        <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" data-html="true" title="<b>Tooltip</b> <em>on </em> right">
        Tooltip on right
    </button>

而不是:

    <button type="button" class="btn btn-default" data-toggle="tooltip"
       ata-placement="top" data-html="true" title="<b>Tooltip</b> <em>on </em> right">
    Tooltip on right
</button>