Twitter Bootstrap Question posted in

Twitter bootstrap 3. Give tooltip dynamic ID based on parent

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

Tags:

2

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0

    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>';
    });
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search