CSS timeline changing because of Bootstrap tooltip

Hi guys,
Thanks again for the help with timeline. I have encountered a new issue which changes the timeline while showing the tooltip and its also not displaying properly.
Any ideas? Thanks.

The Bootstrap is an external resource in that JsFiddle.

Please help me out here, how do I debug the Bootstrap script or it’s effect on anything without seing the script or the generated code it adds to the JsFiddle?

Normally a tooltip is absolute positioned, maybe you could try that here so it doesn’t affect the flow.

The problem is that the bootstrap tooltip dynamically adds a div into the mix after the first nested div like this:

<td><div class="progtrckr-table">
            <div class="prog progtrckr-done" data-toggle="tooltip" title="Hooray!" data-placement="bottom"><span class="step"></span></div>
            <div class="tooltip">Hooray</div>
          </div></td>

All your css rules reference elements like this:

div.progtrckr-table div {
    display:table-cell;
    width:2%;
    text-align:center;
    padding-bottom:0.5em;
    vertical-align:bottom;
    position:relative;
}

Specifically div.progtrckr-table div which means that all descendant divs get those rules and that will include the newly added tooltip element as it is now a descendant.

You can’t use vague descendant selectors when you are dynamically inserting content such as tooltips. You need to re-configure your rules so that there is no ambiguity in that section.

e.g. div.progtrckr-table div could more easily be .prog and then you just add the ,prog class to those divs instead of your convoluted rules above.

You never (rarely ever) need to use div.classname as .classname will suffice on its own.

Also you have rules like this:

div.progtrckr-table div:after {

That will also add those pseudo elements onto the tooltip element and just confuse things further. That rule could again be simply .prog:after{}

Lastly the width 2% on your display:table-cell element will break the position of the absolutely placed div as it will assume it only has a 2% range.

It seems that these 2 rules do not need to be display:table or table-cell and should not need widths as you already have them in an html table. You seem to be combining different things.

div.progtrckr-table {
    width:100%;
    display:table;
    table-layout:fixed;
    margin-bottom:20px;
}
div.progtrckr-table div {
    display:table-cell;
    width:2%;
    text-align:center;
    padding-bottom:0.5em;
    vertical-align:bottom;
    position:relative; 
}

I’m guessing they could simply be:

div.progtrckr-table {
    margin-bottom:20px;
}
div.progtrckr-table div {
    text-align:center;
    padding-bottom:0.5em;
    position:relative;  
}

Of course you need to change that descendant div selector to a class as mentioned.

e.g.

.progtrckr-table {
    margin-bottom:20px;
}
.prog {
    text-align:center;
    padding-bottom:0.5em;
    position:relative;  
}

If you fix all those issues then we can sort out remaining issues. (My example in the other thread was so much simpler :))

3 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.