Question

是否有可能在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>

如何为工具提示提供与分配给它的data-tooltip-id相对应的ID＆＃34;父母＆＃34;？

我需要能够使用给定的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>'
});

我希望有人可以提供帮助

Answer 1

从您的示例代码中，纯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

Twitter bootstrap 3.根据父

1 个答案: