Twitter bootstrap 3. Give tooltip dynamic ID based on parent

Question

Is it possible to give tooltips in Twitter bootstrap a dynamic ID based on the element it's assigned to?

For example, if I have 3 list items;

<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>

How can I give the tooltips an ID which corresponds to the data-tooltip-id assigned to it's "parent"?

I need to be able to change the colour of tooltips with a given ID, but thus far have been unable to figure out how to assign these ID's

I'm using this code to trigger tooltips at the moment;

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

I hope someone can help

http://stackoverflow.com/questions/12639708/modifying-twitter-bootstraps-tooltip-colors-based-on-position — daremachine, Apr 30 '15 at 17:37

score 2 · Answer 1 · answered Apr 30 '15 at 17:47

Whenever you have instance specific data you need to pass into a plugin you can always initialize the plugin per instance within a $.each loop. This allows you to pull data from the specific elements to pass into plugin options

$('[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>';
    });
});

score 1 · Answer 2 · edited Jun 20 '20 at 09:12

From your example code, pure CSS can handle it like so:

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

Of course you could just change data-tooltip-id="item-1" to id="item-1", and write the CSS with ID selectors, like:

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

The id is on the <li> elment... the tooltip ID's are dynamic

See this functioning demo

Twitter bootstrap 3. Give tooltip dynamic ID based on parent

2 Answers2