Bootstrap 3.0 Açılır Pencereler ve araç ipuçları

84

Bootstrap'te yeniyim ve açılır pencere ve araç ipucu özelliklerinin çalışmasını sağlamakta sorun yaşıyorum. Açılır pencereler ve modellerle ilgili bir sorun yaşamadım ama açılır pencere ve araç ipuçları için bir şeyler eksik gibi görünüyor.

Gösterilecek araç ipuçları alıyorum, ancak önyükleme örnekleri gibi tasarlanmamış ve yerleştirilmemişler. Ve popover hiç çalışmıyor.

Lütfen bir göz atın ve neyi kaçırdığımı bana bildirin.

       <!DOCTYPE html>
    <html>
      <head>
        <title>Bootstrap 101 Template</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- Bootstrap -->
        <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
        <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet" media="screen">
        <link href="css/font-awesome.min.css" rel="stylesheet" media="screen">
        <link href="css/index.css" rel="stylesheet" media="screen">
        <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!--[if lt IE 9]>
          <script src="../../assets/js/html5shiv.js"></script>
          <script src="../../assets/js/respond.min.js"></script>
        <![endif]-->
      </head>
      <body>
       <p id="tool"class="muted" style="margin-bottom: 0;">
        Tight pants next level keffiyeh
        <a href="#" data-toggle="tooltip" title="Default tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" data-toggle="tooltip" title="Another tooltip">have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan <a href="#" data-toggle="tooltip" title="Another one here too">whatever keytar</a>, scenester farm-to-table banksy Austin <a href="#" data-toggle="tooltip" title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral.</p>
       <h3>Live demo</h3>
        <div style="padding-bottom: 24px;">
          <a id="pop" href="#" class="btn btn-lg btn-danger" data-toggle="popover" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">Click to toggle popover</a>
        </div>

        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="http://code.jquery.com/jquery.js"></script>
        <!-- Include all compiled plugins (below), or include individual files as needed -->
        <script type="text/javascript">
            $(document).ready(function() {

                $('.tool').tooltip();
                $('.btn').popover();

            }); //END $(document).ready()

        </script>

        <script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap.min.css"></script>

      </body>

    </html>
javascript  jquery  css  twitter-bootstrap 
— kullanıcı2560895
kaynak
Aynı soruyu birkaç dakika önce yayınladım, ayrıca BS3'ü Modals ve Tabs gibi çalışan her şeyle kullanıyorum, ancak Tooltips veya Popovers yok ... bir şey bulursam sizi güncellemeyecek.
— xXPhenom22Xx
popover için, seçenekler tanımlı değil
— Cybermaxs
Şimdilik sadece varsayılan davranışı elde etmeye çalışıyordum, ancak tıklama yerine fareyle üzerine gelindiğinde gösterilmesini sağlamakla ilgileniyorum, ancak sonraki adım buydu. Yine de seçenekler için bir şeyler koymam gerekiyor mu?
— user2560895
Yukarıdaki kod şu anda kullandığım şey ve hala çalışmıyor. Herhangi bir öneri? Yanlış sırada bir şey mi var?
— user2560895

Yanıtlar:

147

Çıkıyor Evan Larsen iyi cevabı vardır . Lütfen cevabını destekleyin (ve / veya doğru cevap olarak seçin) - bu harika.

JsFiddle burada çalışıyor

Evan'ın numarasını kullanarak, tüm ipuçlarını tek bir kod satırı ile başlatabilirsiniz:

$('[data-toggle="tooltip"]').tooltip({'placement': 'top'});

Uzun paragrafınızdaki tüm araç ipuçlarının yalnızca o satırla çalışan araç ipuçları olduğunu göreceksiniz.

JsFiddle örneğinde (yukarıdaki bağlantı), bir araç ipucunun (Oturum Aç düğmesiyle) varsayılan olarak AÇIK olduğu bir durum da ekledim. Ayrıca, araç ipucu kodu HTML biçimlendirmesinde değil jQuery'deki düğmeye EKLENİR.

Popovers yapmak araç ipuçları ile aynı çalışır:

$('[data-toggle="popover"]').popover({trigger: 'hover','placement': 'top'});

İşte buyur! Nihayet başarı.

Bunları çözmenin en büyük sorunlarından biri bootstrap'in jsFiddle ile çalışmasını sağlamaktı ... İşte yapmanız gerekenler:

  1. Twitter Bootstrap CDN'si için buradan referans alın: http://www.bootstrapcdn.com/
  2. Her bir bağlantıyı not defterine yapıştırın ve URL hariç TÜMÜNÜ çıkarın. Örneğin:
    //netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css
  3. JsFiddle'da sol tarafta, External Resources akordeon açılır menüsünü açın
  4. Her yapıştırmadan sonra artı işaretine basarak her URL'yi yapıştırın
  5. Şimdi, "Çerçeveler ve Uzantılar" akordiyon açılır menüsünü açın ve jQuery 1.9.1'i (veya hangisini ...) seçin.

ŞİMDİ gitmeye hazırsınız.

— cssyphus
kaynak
jsFiddle'da tetikleyici neden tek tırnaklarla çevrili değil de yerleşim öyledir?
— HPWD
İyi bir sebep yok, sadece kaçırdım. Ama işe yarıyor gibi görünüyor. Belki de tek kelimelik anahtarların tırnak işaretlerine ihtiyacı yoktur - bazen gerekli değildir - yine de, genellikle onları
— yazıyorum
bu bana mantıklı geliyor. Açıkladığınız için teşekkürler.
— HPWD
4
bu bana anlamsız geliyor. Ha! söylemek zorunda kaldım;)
— Evan Larsen
Bu yöntemi belirli bir konteynere göre görelilikte kullanabilir misiniz? Tüm araç ipuçlarını veya açılır pencereleri belirli bir kapsayıcı içinde mi oluşturuyorsunuz?
— Michael Ecklund
231

Araç ipucunu etkinleştirmek için bunu tüm sayfalarımda kullanıyorum

$(function () { $("[data-toggle='tooltip']").tooltip(); });
— Evan Larsen
kaynak
4
teşekkürler, verdiğim tüm cevaplar arasında muhtemelen bunun için en az zaman harcadığımı söylemeliyim. Ama yine de bir şekilde en çok puanı aldı.
— Evan Larsen
Ama sorun şu ki. benim için chrome ile çalışmıyor. daha sonra bu gönderiden jsfiddle.net/arunpjohny/4HptX/4 bir şeyler yapmaya başladım stackoverflow.com/questions/18372632/…
— Md. Salahuddin
@Md Salahuddin, jquery'nizi güncelledikten sonra şimdi çalışıyor mu? Bir soru mu soruyorsunuz yoksa bu bir ifade miydi?
— Evan Larsen
1
Bu sadece bir ifade. i kullanılan jsfiddle.net/arunpjohny/4HptX/4 bu kod benim durumumda için krom çalışma değildi çünkü yerine.
— Md. Salahuddin
27

BOOTSTRAP 3 ile Çalışma: Kısa ve Basit

Çek - JS Fiddle

HTML

<div id="myDiv">
<button class="btn btn-large btn-danger" data-toggle="tooltip" data-placement="top" title="" data-original-title="Tooltip on top">Tooltip on top</button>    
</div>

Javascript

$(function () { 
    $("[data-toggle='tooltip']").tooltip(); 
});
— Abhishek Goel
kaynak
Eşzamansız olarak (ajax, açısal vb.) Yüklenen veriler için pop-over işlevselliğine sahip olmak istiyorsanız bu işe yaramayacaktır, ancak aşağıdaki cevap olacaktır.
— Adrian Hedley
6

Bunu DOM'a hazır olarak yapmak zorundaydım

$( document ).ready(function () { // this has to be done after the document has been rendered
    $("[data-toggle='tooltip']").tooltip({html: true}); // enable bootstrap 3 tooltips
    $('[data-toggle="popover"]').popover({
        trigger: 'hover',
        'placement': 'top',
        'show': true
    });
});

Ve yük siparişlerimi şu şekilde değiştir:

  • jQuery
  • jQuery kullanıcı arayüzü
  • Önyükleme
— Jonathan
kaynak
1
Benzer bir sorun yaşadım, bootstrap'tan sonra jquery ui yüklüyordum, cevabınız bununla ilgili sorunu fark etmemi sağladı.
— hubson bropa
kontrol Bu popover için, 1. Popovers tetiklenmesi, Veri aracılığıyla popovers 2. Konumlandırma Özellikleri
— Shaiju T
5

Bazı nedenlerden dolayı kodumu çalıştırabilmemin tek yolu birkaç şeyi değiştirmektir. Şimdiye kadar sizin için hiçbir şey işe yaramadıysa, lütfen şuna bir şans verin:

$('body').popover({ 
    selector: '[data-toggle="popover"]', 
    trigger: 'hover',
    placement: 'right'
});
— Noel Baba
kaynak
1
Açılır bilgi öğesi başlangıçta görünmeyebileceğinden, benim için işe yarayan tek şey budur. Teşekkürler!
— J. Titus
0

Komut dosyanızda bir sözdizimi hatası var ve xXPhenom22Xx'te belirtildiği gibi, araç ipucunu başlatmanız gerekir.

<script type="text/javascript">

    $(document).ready(function() {

        $('.btn-danger').tooltip();

    }); //END $(document).ready()

</script>

"Btn-danger" sınıfınızı kullandığımı unutmayın. Farklı bir sınıf oluşturabilir veya bir id="someidthatimakeup".

— cssyphus
kaynak
Tamam, önerdiğinizle eşleşecek şekilde kodu değiştirdim sanırım. Hala çalışmıyor. Henüz Javascript bilmiyorum, bu yüzden bu biraz zor. Ben sadece aynı şekilde çalışması gereken örnekleri almaya çalışıyorum.
— user2560895
Popover olanı biraz zor ama yukarıdaki gibi çalışacak araç ipucunu aldım.
— cssyphus
0

Araç ipucunu etkinleştirmeniz yeterlidir:

$('some id or class that you add to the above a tag').popover({
    trigger: "hover" 
})
— xXPhenom22Xx
kaynak
Hayır, bu araç ipucunu değil, sadece üzerine geldiğinizde açılır pencerenin kendisini gösterecektir.
— CpnCrunch
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.