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>

Answer 2

我从Aurelia团队成员那里得到answer。这就是他所说的：

Bootstrap的工具提示组件需要javascript。使用自定义属性执行工具提示javascript

import {customAttribute, inject} from 'aurelia-framework';
import $ from 'jquery';
import 'bootstrap';

@customAttribute('bootstrap-tooltip')
@inject(Element)
export class BootstrapTooltip {
  constructor(element) {
    this.element = element;
  }

  bind() {
    $(this.element).tooltip();
  }

  unbind() {
    $(this.element).tooltip('destroy');
  }
}

然后在元素上添加bootstrap-tooltip属性：

<require from="./bootstrap-tooltip"></require>

<input bootstrap-tooltip data-toggle="tooltip" data-placement="top" data-title="bootstrap tooltip" title="html tooltip">

它适用于aurelia骨架应用。 （我会将其用于我的打字稿应用程序。）