बूटस्ट्रैप "टूलटिप" और "पॉपओवर" तालिका में अतिरिक्त आकार जोड़ते हैं

Question 1

नोट:
आपके द्वारा बूटस्ट्रैप संस्करण (3.3 या इससे पहले) के आधार पर, आपको एक अलग उत्तर की आवश्यकता हो सकती है।
नोटों पर ध्यान दें।

जब मैं टूलटिप्स (सेल पर होवर) या इस कोड में पॉपओवर को सक्रिय करता हूं, तो तालिका का आकार बढ़ रहा है। इससे कैसे बचा जा सकता है?

यहां रिक्त - 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>

सलाह में धन्यवाद!

Question 2

नोट: बूटस्ट्रैप 3.0 ~ 3.2 के लिए समाधान

आपको इसके अंदर एक तत्व बनाने tdऔर इसे एक टूलटिप लागू करने की आवश्यकता है, इस तरह , क्योंकि एक टूलटिप स्वयं एक div है, और जब इसे किसी tdतत्व के बाद रखा जाता है तो यह टेबल लेआउट को ब्रेक करता है।

इस समस्या को बूटस्ट्रैप की नवीनतम रिलीज़ के साथ पेश किया गया था। यहाँ GitHub पर सुधार के बारे में चर्चा चल रही है । उम्मीद है कि अगले संस्करण में फिक्स्ड फाइलें शामिल हैं।

Question 3

नोट: बूटस्ट्रैप 3.3+ के लिए समाधान

सरल उपाय

में .tooltip()कॉल, सेट containerकरने के लिए विकल्प body:

$(function () {
  $('[data-toggle="tooltip"]').tooltip({
    container : 'body'
  });
});

वैकल्पिक रूप से आप data-containerविशेषता का उपयोग करके ऐसा कर सकते हैं :

<p data-toggle="tooltip" data-placement="left" data-container="body" title="hi">some text</p>

यह काम क्यों करता है?

यह समस्या को हल करता है क्योंकि डिफ़ॉल्ट रूप से, टूलटिप में है display: blockऔर तत्व उस स्थान पर डाला गया है जहां से इसे बुलाया गया था। इसके कारण display: block, यह कुछ मामलों में पृष्ठ प्रवाह को प्रभावित करता है, अर्थात अन्य तत्वों को नीचे धकेलता है।

कंटेनर को बॉडी एलीमेंट में सेट करके, टूलटिप को बॉडी में जोड़ा जाता है, जहां से इसे बुलाया गया था, इसलिए यह अन्य तत्वों को प्रभावित नहीं करता है क्योंकि "पुश डाउन" करने के लिए कुछ भी नहीं है।

बूटस्ट्रैप टूलटिप्स प्रलेखन

Question 4

नोट: बूटस्ट्रैप 3.3+ के लिए समाधान

यदि आप किसी टूलटिप को किसी <td>तत्व पर लागू करते समय तालिका को तोड़ने से बचना चाहते हैं , तो आप निम्न कोड का उपयोग कर सकते हैं:

    $(function () {
        $("body").tooltip({
            selector: '[data-toggle="tooltip"]',
            container: 'body'
        });
    })

आप html इस तरह देख सकते हैं:

<td data-toggle="tooltip" title="Your tooltip data">
    Table Cell Content
</td>

यह भी गतिशील रूप से भरी हुई सामग्री के साथ काम करता है। उदाहरण के लिए डेटाटैबल्स के साथ उपयोग में

Question 5

मैं स्वीकृत उत्तर के लिए कुछ सटीक जोड़ना चाहूंगा, मैंने पठनीयता के लिए उत्तर प्रारूप का उपयोग करने का निर्णय लिया।

नोट: बूटस्ट्रैप 3.0 ~ 3.2 के लिए समाधान

अभी, अपने टूलटिप को एक div में लपेटना एक समाधान है , लेकिन यदि आपको अपना पूरा <td>टूलटिप (बूटस्ट्रैप सीएसएस के कारण) दिखाना है तो कुछ संशोधनों की आवश्यकता होगी । यह करने के लिए एक सरल तरीका <td>है रैपर को पैडिंग ट्रांसफर करना है:

एचटीएमएल

<table class="table table-hover table-bordered table-striped">
    <tr>
        <td>
            <div class="show-tooltip" title="Tooltip content">Cell content</div>
        </td>
    </tr>
</table>

जेएस (jQuery)

$('.show-tooltip').each(function(e) {
    var p = $(this).parent();
    if(p.is('td')) {
        /* if your tooltip is on a <td>, transfer <td>'s padding to wrapper */
        $(this).css('padding', p.css('padding'));
        p.css('padding', '0 0');
    }
    $(this).tooltip({
        toggle: 'toolip',
        placement: 'bottom'
    });
});

Question 6

आपको डेटेबल फंक्शन fnDrawCallback के अंदर टूलटिप को इनिशियलाइज़ करना चाहिए

"fnDrawCallback": function (data, type, full, meta) { $('[data-toggle="tooltip"]').tooltip({ placement: 'right', title: 'heyo', container: 'body', html: true }); },

और नीचे के रूप में अपने कॉलम को परिभाषित करें

 {
      targets: 2,
      'render': function (data, type, full, meta) {
       var htmlBuilder = "<b>" + data + "</b><hr/><p>Description: <br/>" + full["longDescrioption"] + "</p>";
      return "<a href='#' class='Name'>" + (data.length > 50 ? data.substr(0, 50) + '…' : data) + "</a>" +
      "<sup data-toggle='tooltip' data-original-title=" + htmlBuilder + ">"+
      "<i class='ic-open-in-new ic' style='font-size:12px;margintop:-3px;'></i></sup>";
    }
 },

Question 7

अगर आप टेबल के लिए डिटैटेबल का इस्तेमाल कर रहे हैं तो यह फुल यूज होगा

$('#TableId').DataTable({
                "drawCallback": function (settings) {
                    debugger;
                    $('[data-toggle="tooltip"]').tooltip({
                        container: 'body'
                    });

                }
            });

Question 8

यदि आप AngularJS के लिए बूटस्ट्रैप निर्देशों का उपयोग कर रहे हैं, तो टूलटिप-एपेंड-टू-बॉडी विशेषता का उपयोग करें।

<td ng-repeat="column in row.columns" uib-tooltip="{{ ctrl.viewModel.leanings.tooltip }}" tooltip-append-to-body="true"></td>