Twitter bootstrap 3. 根据父级赋予tooltip动态ID答案

【问题标题】：Twitter bootstrap 3. Give tooltip dynamic ID based on parentTwitter bootstrap 3. 根据父级赋予tooltip动态ID
【发布时间】：2015-04-30 17:29:42
【问题描述】：

是否可以根据分配给 Twitter 引导程序的元素为工具提示提供动态 ID？

例如，如果我有 3 个列表项；

<ul>
    <li data-tooltip-id="item-1" data-toggle="tooltip" data-original-title="Title 1">Item 1<li>
    <li data-tooltip-id="item-2" data-toggle="tooltip" data-original-title="Title 2">Item 2<li>
    <li data-tooltip-id="item-3" data-toggle="tooltip" data-original-title="Title 3">Item 3<li>
</ul>

如何为工具提示提供一个 ID，该 ID 对应于分配给它的“父级”的 data-tooltip-id？

我需要能够更改具有给定 ID 的工具提示的颜色，但到目前为止还无法弄清楚如何分配这些 ID

我现在正在使用此代码来触发工具提示；

$('[data-toggle="tooltip"]').tooltip({
    template: '<div class="tooltip manage-tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'
});

希望有人能帮忙

【问题讨论】：

stackoverflow.com/questions/12639708/…

标签： jquery twitter-bootstrap

【解决方案1】：

每当您需要将特定于实例的数据传递给插件时，您始终可以在 $.each 循环中为每个实例初始化插件。这允许您从特定元素中提取数据以传递到插件选项中

$('[data-toggle="tooltip"]').each(function () {
    // now have instance access to "this"
    var $this = $(this),
        tipId = $this.data('tooltip-id');
    // initialize instance of plugin
    $this.tooltip({
        template: '<div id="' + tipId + '".........></div>';
    });
});

【讨论】：

【解决方案2】：

从您的示例代码中，纯 CSS 可以这样处理：

[data-tooltip-id="item-1"] + .tooltip > .tooltip-inner{
  background-color:#cc0000;
}
[data-tooltip-id="item-1"] + .tooltip > .tooltip-arrow{
  border-top-color:#cc0000;
}

当然你可以把data-tooltip-id="item-1"改成id="item-1"，然后用ID选择器写CSS，比如：

#item-1 + .tooltip > .tooltip-inner{
    background-color:#cc0000;
}
#item-1 + .tooltip > .tooltip-arrow{
    border-top-color:#cc0000;
}

ID 在 <li> 元素上...工具提示 ID 是动态的

见this functioning demo

【讨论】：