önyükleme "araç ipucu" ve "açılır bilgi penceresi" tabloya ekstra boyut ekler

82

Not:
Bootstrap sürümünüze bağlı olarak (3.3'ten önceki veya sonraki), farklı bir cevaba ihtiyacınız olabilir.
Notlara dikkat edin.

Bu kodda araç ipuçlarını (hücrenin üzerine gelin) veya açılır pencereleri etkinleştirdiğimde, tablonun boyutu artıyor. Bundan nasıl kaçınabilirim?

Here emptyRow - 100 ile tr üretme işlevi

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

tavsiye için teşekkürler!

— Mishka
kaynak

Tam olarak ne ekstra beden demek istiyorsun? js, önceden tanımlanmış boş satırın altındaki bir satırda 100 hücre oluşturur. Bir keman

— Devellar

@Devellar, araç ipucunu etkinleştirirken boyut artar (hücrenin üzerine gelin)

— mishka

@MikhaillErofeev Bende de aynı sorun var, eğer

— çözerseniz

@RonakJangir, aşağıdaki yanıta bakın

— mishka

@MikhaillErofeev Sadece td'ye araç ipucu eklemek istiyorum, bu yüzden bu cevap benim için kullanışlı değil. Çözüm, twitter önyüklemesine gönderilmiştir bkz. Github.com/twitter/bootstrap/issues/5980

— Rnk Jangir

90

Not: Bootstrap 3.0 ~ 3.2 için Çözüm

Bir içinde bir elemanı oluşturmak için gereken tdve benzeri buna bir araç ipucu uygulamak bu bir sonra yerleştirildiğinde bir araç ipucu kendisi div çünkü ve tdeleman o frenler masa düzeni.

Bu sorun, Bootstrap'in en son sürümünde tanıtıldı. Burada GitHub'daki düzeltmelerle ilgili devam eden tartışmalar var . Umarım bir sonraki sürüm sabit dosyaları içerir.

— Devellar
kaynak

57

GitHub bağlantısından: v2.3.x'ten itibaren çözüm, araç ipucunun / açılır bilgi penceresinin kap seçeneğini gövdeye ayarlamaktır. Örneğin: $ (...). Tooltip ({container: 'body'}); Veya HTML'de bir data- * özelliği kullanarak: data-container = "body"

— Domenic

5

@Domenic Bu bir cevap olmalı ve ardından doğru çözüm olarak işaretlenmelidir. Sadece çalışıyor.

— Timm

1

lütfen bunu bir yanıt olarak ekleyin, gelecekteki geliştiriciler için çok daha kolay

— cmario

90

Not: Bootstrap 3.3+ için Çözüm

Basit Çözüm

Gelen .tooltip()çağrı, set containerseçeneği için body:

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

Alternatif olarak, data-containerözniteliği kullanarak aynısını yapabilirsiniz :

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

Bu neden işe yarıyor?

Bu, sorunu çözer çünkü varsayılan olarak araç ipucu vardır display: blockve öğe çağrıldığı yere eklenir. Nedeniyle display: block, bazı durumlarda sayfa akışını etkiler, yani diğer öğeleri aşağı iterek.

Kap gövde elemanına ayarlandığında, araç ipucu çağrıldığı yer yerine gövdeye eklenir, böylece diğer elemanları etkilemez çünkü "aşağı itecek" bir şey yoktur.

Bootstrap Araç İpuçları Belgeleri

— MrCode
kaynak

3

Teşekkürler! Mükemmel çalıştı.

— Amy Patterson

Teşekkürler!! Data-toggle = "tooltip" seçeneği işe yaradı, ancak kapsayıcı: 'gövde' seçeneği işe yaramadı ..

— R.

Çok teşekkürler, bu saatlerimi kurtardı :)

— Viky293

1

Araç ipucu sayfada bir yerde göründüğünden tablonuz modal ise bu işe yaramaz (muhtemelen hala bulamadım). Caveat Emptor. Kabul edilen cevap yine de işe yarıyor, td içeriğinizi bir div içine sarın ve ipucunu buna uygulayın.

— Hippyjim

17

Not: Bootstrap 3.3+ için Çözüm

Bir <td>öğeye araç ipucu uygularken tabloyu kırmaktan kaçınmak istiyorsanız , aşağıdaki kodu kullanabilirsiniz:

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

Html şöyle görünebilir:

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

Bu, dinamik olarak yüklenen içerikle bile çalışır. Örneğin veri tablolarıyla kullanımda

— shock_gone_wild
kaynak

1

Teşekkür ederim! Sonunda

— verilerle

9

Kabul edilen cevaba biraz kesinlik katmak istiyorum, okunabilirlik için cevap formatını kullanmaya karar verdim.

Not: Bootstrap 3.0 ~ 3.2 için Çözüm

Şu anda, araç ipucunuzu bir div içine sarmak çözümdür , ancak bütününüzün <td>araç ipucunu göstermesini istiyorsanız (Bootstrap CSS nedeniyle) bazı değişikliklere ihtiyaç duyacaktır . Bunu yapmanın basit bir yolu, <td>dolguyu paketleyiciye aktarmaktır :

HTML

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

JS (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'
    });
});

— zessx
kaynak

<td> 'nin tamamının ipucunu göstermesini istiyorsanız, ipucunu doğrudan td öğesine uygulayın

— shock_gone_wild

@shock_gone_wild Konu bu değil. Herhangi bir <td>öğeye bir araç ipucu uygulamak , orijinal soruda belirtildiği gibi tüm tabloyu ve her yanıtı bozacaktır. Bu yüzden hepimiz içine başka bir unsur eklemeyi seçtik. Bununla birlikte, Bootstrap 4 yeniliklerinden haberdar değilim ve bu hata düzeltilmiş olabilir.

— zessx

hayır, container: 'body' eklerseniz tabloyu kırmaz. Cevabımı burada görün. stackoverflow.com/a/34882401/3927116

— shock_gone_wild

1

container2 yıl bu sorudan sonra, 2014 yılında tanıtıldı. Yorumunuz için teşekkürler, bu seçeneği aydınlatmak için birkaç düzenleme yapacağım ve bu hatanın Bootstrap'in en son sürümleriyle ilgili olmadığını kesin olarak belirteceğim.

— zessx

1

Bunu ekledim, çünkü yüksek oy alan bir cevap zaten kapsayıcı seçeneğini kullanıyor. Ve gelecekteki okuyucular için bu bilgiler çok yararlı olabilir ;)

— shock_gone_wild

1

Sen başlatmak gerekir Tooltip Datatable işlevi içinde fnDrawCallback

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

Ve sütununuzu aşağıdaki gibi tanımlayın

 {
      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>";
    }
 },

— Nikunj Patel
kaynak

FnDrawCallback bölümü için yukarı oy kullanın ve bu, bir BS araç ipucunu HTML formatlamayla başlatmanın sayfalamanın etkin olduğu bir veri tablosu ile çalıştığı tek yerdir.

— Drew

1

Tablo için datatable kullanıyorsanız, tam olarak kullanılacaktır.

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

                }
            });

— Rajdip Khavad
kaynak

0

AngularJS için bootstrap yönergelerini kullanıyorsanız tooltip-append-to-body özniteliğini kullanın.

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

— Haider Abbas
kaynak