skip to Main Content

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;

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

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;

    template: '<div class="tooltip manage-tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

I hope someone can help



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

    [data-tooltip-id="item-1"] + .tooltip > .tooltip-inner{
    [data-tooltip-id="item-1"] + .tooltip > .tooltip-arrow{

    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{
    #item-1 + .tooltip > .tooltip-arrow{

    The id is on the <li> elment… the tooltip ID’s are dynamic

    See this functioning demo

    Login or Signup to reply.
  2. 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 = $'tooltip-id');
        // initialize instance of plugin
            template: '<div id="' + tipId + '".........></div>';
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top