在 Polymer 中使用 Bootstrap 的工具提示

Question

我正在使用带有 Bootstrap 的简单 Polymer 对象，我想在 Polymer 对象中使用工具提示 (as described here)。

假设这是我的聚合物：

<link rel="import" href="../components/bower_components/polymer/polymer.html">

<polymer-element name="my-polymer">
    <template>
        <div data-toggle="tooltip" tooltip="with a tooltip">I am a simple Polymer</div>
    </template>
  <script>
    Polymer({
      domready: function() {
        //$((this.shadowRoot || this).querySelector('[data-toggle="tooltip"]')).tooltip(); // not wotking
        //$("[data-toggle='tooltip']").tooltip(); // not wotking
      }
    });
  </script>
</polymer-element>

根据设计，为了获得工具提示，我们需要执行此命令：

$("[data-toggle='tooltip']").tooltip();

但是因为影子DOM我不能执行这个命令。如何让此代码与 Bootstrap 工具提示一起使用？

Answer 1

我知道这并没有直接回答您的问题，而是为您提供了一个 "Polymer" 替代方案。 Polymer 0.5 有一个工具提示元素（它们看起来很像您发布的 link 上的示例工具提示）

https://www.polymer-project.org/0.5/docs/elements/core-tooltip.html

在 Polymer 中使用 Bootstrap 的工具提示

Using Bootstrap's Tooltip within Polymer

javascript

jquery

twitter-bootstrap

polymer

twitter-bootstrap-3