Twitter Bootstrap Question posted in

twitter bootstrap html tool-tip oddness

I’m trying to add html tool-tips to an existing page that’s made of a table on one side of the page and something else on the other. I want to add the tool-tip to each td in the table.

With the tool-tip added to each td every time I hover over a td the whole table shifts over one cell!

Also, tried only on chrome.

before the hover
enter image description here

And when I hover over the first td
enter image description here

Below is a cut down, but fully working example of the oddness, any thoughts appreciated.

<!DOCTYPE html>
<html>
    <head lang="en">
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
        <link rel="shortcut icon" href="static/img/favicon.ico" type="image/x-icon" />
    </head>
    <body>
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-6">
                    <div class="table-responsive" id="23">
                        <TABLE class="table table-bordered table-nonfluid">
                            <tr id="hdr" class="bg-primary h5">
                                <th class="text-center">Mon 18 May</th>
                                <th class="text-center">Thu 21 May</th>
                            </tr>
                            <tr id="day" class="text-center">
                                <td class="bg-danger" 
                                    data-trigger="hover" 
                                    data-placement="auto" 
                                    data-html="true" 
                                    data-title="<div>WHAT!</div>"
                                    data-toggle="tooltip"
                                    >
                                    <sup>300</sup>/<sub>312</sub>
                                </td>
                                <td class="bg-danger"
                                    data-trigger="hover" 
                                    data-placement="auto" 
                                    data-html="true" 
                                    data-title="<div>WHAT!</div>"
                                    data-toggle="tooltip"
                                 >
                                 <sup>277</sup>/<sub>312</sub></td>
                            </tr>
                        </TABLE>
                    </div>
                </div>
                <div class="col-md-6 " style="padding-top: 16px;">
                    <blockquote id="comment_txt">before, after and then on</blockquote>
                </div>
            </div>
        </div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
        <script>
            $( document ).ready(function() {
                 $('[data-toggle="tooltip"]').tooltip()
            });
        </script>
    </body>

</html>
Tags:

2

Answers


  1. 0

    I suggest to wrap the content of your td inside a span like this

     <td><span data-trigger="hover" style="display:block"
                                data-placement="auto" 
                                data-html="true" 
                                data-title="<div>WHAT!</div>"
                                data-toggle="tooltip"><sup>300</sup>/<sub>312</sub></span></td>

    Is never a good idea using the tooltips directly on a table element.

    Login or Signup to reply.
  2. 0

    Well this is a weird issue actually. Never realised it until now. This might not be the perfect fix but a temporary fix will be to place a span around the text in the td for the one on the left and for the td on the right leave it as it is right now because it works fine only the left one causes this issue.

    Bootply Link right here

     <div class="container-fluid">
            <div class="row">
                <div class="col-md-6">
                    <div class="table-responsive" id="23">
                        <TABLE class="table table-bordered table-nonfluid">
                            <tr id="hdr" class="bg-primary h5">
                                <th class="text-center">Mon 18 May</th>
                                <th class="text-center">Thu 21 May</th>
                            </tr>
                            <tr id="day" class="text-center">
                                <td class="bg-danger" >
                                  <span data-trigger="hover" 
                                    data-placement="auto" 
                                    data-html="true" 
                                    data-title="WHAT!"
                                    data-toggle="tooltip">
                                    <sup>300</sup>/<sub>312</sub>
                                      </span>
                                </td>
                                <td class="bg-danger"
                                    data-trigger="hover" 
                                    data-placement="auto" 
                                    data-html="true" 
                                    data-title="<div>WHAT!</div>"
                                    data-toggle="tooltip"
                                 >
                                 <sup>277</sup>/<sub>312</sub></td>
                            </tr>
                            <tr id="day" class="text-center">
                                <td class="bg-danger" >
                                  <span data-trigger="hover" 
                                    data-placement="auto" 
                                    data-html="true" 
                                    data-title="WHAT!"
                                    data-toggle="tooltip">
                                    <sup>300</sup>/<sub>312</sub>
                                      </span>
                                </td>
                                <td class="bg-danger"
                                    data-trigger="hover" 
                                    data-placement="auto" 
                                    data-html="true" 
                                    data-title="<div>WHAT!</div>"
                                    data-toggle="tooltip"
                                 >
                                 <sup>277</sup>/<sub>312</sub></td>
                            </tr>
                        </TABLE>
                    </div>
                </div>
                <div class="col-md-6 " style="padding-top: 16px;">
                    <blockquote id="comment_txt">before, after and then on</blockquote>
                </div>
            </div>
        </div>

    The problem with my fix is simple. The tooltip will only show on the left td if you hover on the text in the cell not on the table-cell itself whilst the tooltip will show if you hover on the table cell on the right. bad for user experience I know but this is as i said a temporary fix.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search