Question

40

bootstrap tooltip and popover add extra size in table

rated 0 times [ 41] [ 1] / answers: 1 / hits: 79827 / 12 Years ago, wed, november 7, 2012, 12:00:00

Note:

Depending on you Bootstrap version (prior to 3.3 or not), you may need a different answer.

Pay attention to the notes.

When I activate tooltips (hover over the cell) or popovers in this code, size of table is increasing. How can I avoid this?

Here emptyRow - function to generate tr with 100

<html>

<head>

    <title></title>

    <script type=text/javascript language=javascript src=https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js></script>

    <link type=text/css rel=stylesheet href=http://twitter.github.com/bootstrap/assets/css/bootstrap.css>

    <script type=text/javascript language=javascript src=http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.2.1/bootstrap.min.js></script>

    <style>    

    #matrix td {

        width: 10px;

        height: 10px;

        border: 1px solid gray; 

        padding: 0px; 

    }

    </style>

<script>

function emptyRow() {

        str = '<tr>'

        for (j = 0; j < 100; j++) {

            str += '<td rel=tooltip data-original-title=text></td>'

        }

        str += '</tr>'

        return str

    }

    $(document).ready(function () {

        $(#matrix tr:last).after(emptyRow())

        $([rel=tooltip]).tooltip();

    });

    </script>

</head>

<body style=margin-top: 40px;>

<table id=matrix>

    <tr>

    </tr>

</table>

</body>

</html>

thank in advice!

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jakobarmandr

Add To Favorites

Follow

Total Points: 363

Total Questions: 103

Total Answers: 87

Location: Romania

Member since Mon, Jun 6, 2022

2 Years ago

answered 12 Years ago eanskylerg · Accepted Answer

Note: Solution for Bootstrap 3.0 ~ 3.2

You need to create an element inside a td and apply a tooltip to it, like this, because a tooltip itself is a div, and when it is placed after a td element it brakes table layout.

This problem was introduced with the latest release of Bootstrap. There are ongoing discussions about fixes on GitHub here. Hopefully the next version includes the fixed files.