Bootstrap araç ipuçları çalışmıyor

260

Burada deliriyorum.

Aşağıdaki HTML'yi aldım:

<a href="#" rel="tooltip" title="A nice tooltip">test</a>

Bootstrap stili araç ipucu, normal bir araç ipucu görüntülemeyi reddediyor.

Ben bootstrap.css gayet iyi çalışıyor ve orada sınıfları görebiliyorum

HTML dosyamın sonunda ilgili tüm JS dosyaları var:

<script src="bootstrap/js/jquery.js"></script>
<script src="bootstrap/js/bootstrap-alert.js"></script>
<script src="bootstrap/js/bootstrap-modal.js"></script>
<script src="bootstrap/js/bootstrap-transition.js"></script>
<script src="bootstrap/js/bootstrap-tooltip.js"></script>

Bootstrap örneğinin kaynağına baktım ve orada herhangi bir yerde araç ipucunu başlatan hiçbir şey göremiyorum. Yani sadece işe yarayacağını tahmin ediyorum, yoksa burada hayati bir şeyi mi kaçırıyorum?

Ben modals ve uyarıları ve gayet iyi çalışan diğer şeyler var, bu yüzden toplam bir moron değilim;)

Herhangi bir yardım için teşekkürler!

twitter-bootstrap 
— Mike Bartlett
kaynak
2
Araç ipucu twitters örneğinde application.js dosyasında başlatılıyor. Html'inizi gönderebilir misiniz? Senaryoyu nasıl başlattığınıza bir göz atın.
— Andres Ilich
2
Ahhhhh .... İlk yorumda bunu göz ardı ettim. Bu da işe codeyarar : <a href="#" rel="tooltip" title="İyi bir araç ipucu" class="tooltip-test"> test </a> <br> <script> // araç ipucu demo $ (' .tooltip-test '). tooltip () </script>
— Mike Bartlett
1
araç ipucu seçeneklerine bir seçici geçirmeyi unutmayın,$('.tooltip-test').tooltip({ selector: "a" })
— Andres Ilich
Teşekkürler Andres. Aslında orada seçiciye ihtiyaç duymadım, sanırım çünkü a sınıfı araç ipucu testi olarak adlandırılıyor.
— Mike Bartlett
3
Seçici seçeneği olmadan araç ipucu benim için çalışmıyor, işte koyduğum bir demo: jsfiddle.net/VXctp , seçici olmadan deneyin.
— Andres Ilich

Yanıtlar:

276

Özetlemek gerekirse: jQuery seçicileri kullanarak araç ipuçlarınızı etkinleştirin

<script type="text/javascript">
    $(function () {
        $("[rel='tooltip']").tooltip();
    });
</script>

Aslında, özellik seçiciyi kullanmanıza gerek yoktur rel="tooltip", etiketinde olmasa bile herhangi bir öğeye çağırabilirsiniz .

— Manuel Ebert
kaynak
13
Raylar ile çalışanlar için, bu zaten tanımlanmış bootstrap.js.coffeeolan $(".tooltip").tooltip(). Sadece içine dahil //= require bootstrapettiğinizden emin olun application.js.
— slhck
6
Herhangi bir öğeye .tooltip sınıfı eklemek benim için araç ipuçlarını kıracaktır. Gizli öğeyi .tooltip içeren öğenin içindeki içerik gizlenir ve gizli öğeyi faremle bulmayı başarabilirsem araç ipucu gösterilir. Başka bir seçici veya sınıf adı kullanmak iyi sonuç verir. \
— Leonel Galán
4
@Leito doğru, bootstrap için stilleri tanımlar .tooltipve varsayılan olarak görünmezdir. relYine de özniteliği veya başka bir sınıfı seçici olarak kullanabilirsiniz .
— Manuel Ebert
3
Evet, hem HTML İşaretleme hem de JS Seçicilerine ihtiyacınız var. Bunlar araç ipuçlarını uygulamanın alternatif yolları değildir.
— ATSiem
1
Bazıları kipte bir araç ipucu görüntülemeye çalışıyor olabilir ve bu tüm önyükleme sürümlerinde çalışmaz. Eğer bir kipte değil, normal bir sayfada denerseniz ve işe yarıyorsa, sorun olduğunu biliyorsunuzdur.
— mjnissim
212

Aynı sorunu yaşadıktan sonra, bu çözümün Bootstrap gerekli özelliklerinin dışına ek etiket nitelikleri eklemek zorunda kalmadan çalıştığını buldum.

HTML

<a href="#" data-toggle="tooltip" title="Title Here">Hyperlink Text</a>

JQuery

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

Bu yardımcı olur umarım!

— Marcus Hoelscher
kaynak
20
Teşekkürler! Bu benim için çalıştı. Bir şekilde bu sayfadaki diğer çözümler benim için işe yaramıyordu.
— Roman
1
Ben Roman'la birlikteyim. Bu çözüm aynı zamanda bootswatch css varyantları ile de çalışır.
— DaveCS
Bu benim için çalıştı. Bunu denemeden başka hiçbir şey onu hayata geçirmedi. Teşekkürler!
— BlakePetersen
1
Bu benim için de işe yaradı. Neden herhangi bir fikir $ ('[data-toggle = "tooltip"]'). Tooltip ({'placement': 'top'}); çalışmıyor mu?
— ZeroCool
Teşekkürler, bu benim için çalıştı. JQuery kitaplığını yükledikten SONRA kodu <script> etiketleri arasına eklediğinizden emin olun.
— GeraldScott
31

Tüm js dosyalarına ayrı ayrı ihtiyacınız yoktur

Tüm bootstrap işlevlerini kullanacaksanız aşağıdaki dosyaları kullanın:

-bootstrap.css
-bootstrap.js

her ikisi de http://twitter.github.com
ve nihayet
jquery.js'nin en son sürümünde bulunabilir

Glifonlar için için görüntüye ihtiyacınız var


web sitenizin / img / klasörüne yüklemeniz gereken glyphicons-halfings.png ve / veya glyphicons-halfings-white.png (beyaz renkli görüntüler) (veya) istediğiniz yerde saklayın, ancak bootstrap içindeki klasör dizinini değiştirin .css

Araç ipucu için <head> </head>etiketinizin içinde aşağıdaki komut dosyasına ihtiyacınız var 

  <script type='text/javascript'>
     $(document).ready(function () {
     if ($("[rel=tooltip]").length) {
     $("[rel=tooltip]").tooltip();
     }
   });
  </script>

Bu kadar...

— Harish Kumar
kaynak
27

http://getbootstrap.com/javascript/#tooltips-usage

Kaydolma işlevselliği Performans nedenleriyle, Araç İpucu ve Popover veri uygulamaları kaydolma anlamına gelir, yani

onları kendiniz başlatmalısınız.

Bir sayfadaki tüm araç ipuçlarını başlatmanın bir yolu, bunları veri değiştirme özniteliklerine göre seçmek olacaktır:

<script>
$(function () {
    $('[data-toggle="tooltip"]').tooltip()
})
</script>

bu kod parçasını html'nize koymak araç ipuçlarını kullanmanızı sağlar

Örnekler:

<!-- button -->
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>

<!-- a tag -->
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>
— Max O.
kaynak
2
Bu kaydolma konseptini paylaştığınız için teşekkür ederiz! Asla herhangi bir öğreticiden okuma.
— dpp
Tüm jquery / bootstrap araç ipucu whoas için çözüm
— DJ
Sağlanan bağlantı eksik: lütfen getbootstrap.com/docs/4.1/components/tooltips
— Guillaume Husta
20

Bunun eski bir soru olduğunu biliyorum, ancak bootstrap'ın yeni sürümünde ve web sitesinde açık olmadığı için bu sorunu yaşadığımdan, ipucunu nasıl etkinleştirdiğiniz aşağıda açıklanmıştır.

öğenize "ipucu testi" gibi bir sınıf verin

javascript etiketinizde bu sınıfı etkinleştirin:

<script type="text/javascript">
    $('.tooltip-test').tooltip();
</script>

<a href="#" class="tooltip-test" title="" data-original-title="Tooltip">This link</a>
— Amir Soleymani
kaynak
Benim için çalışan tek çözüm buydu. Başlığı güncellemek için data-original-title = "{{someAngularJSVar}}" kullanıyorum ve kusursuz çalışıyor.
— WKara
19

HTML

<a href="#" data-toggle="tooltip" title="Title Here">Hyperlink Text</a>

JQuery

$(document).ready(function() {
    $('[data-toggle=tooltip]').tooltip();
});

Bu benim için iş.

— Igor Shvydok
kaynak
1
Bu teklif benim için de mükemmel çalıştı. Basit ve zarif olduğu için beğendim. Bootstrap standartlarını, eklenti varsayılan olarak başlatılmış gibi, Dropdown ve Tab öğelerinde olduğu gibi kullanmaya devam etmenizi sağlar . Ben JS yeni bir dosyaya @Igor tarafından önerilen ve katma bunu birlikte orijinal bootstrap.js için
— Iago Rodríguez-Quintana'yı
14

Bunu yaparsanız $("[rel='tooltip']").tooltip();, diğer cevaplar önerilen gibi o zaman sadece DOM şu vardır unsurları ipuçları aktive edecek. Bu, DOM'u değiştirecek ve daha sonra dinamik içerik ekleyecekseniz işe yaramayacağı anlamına gelir. Ayrıca, JQuery olay temsilcisini kullanmak yerine, tek tek öğeler için olay işleyicisi yüklediği için bu çok daha az verimlidir . Öyleyse Bootstrap araç ipuçlarını etkinleştirmenin en iyi yolu, belgeye hazır olarak yerleştirebileceğiniz ve unutabileceğiniz bu bir kod satırıdır:

$(document.body).tooltip({ selector: "[title]" });

Veya titleyerine seçici olarak kullandığımı unutmayın . Bu çok diğer öğelere uygulanabileceği bir avantaja sahiptir ( edilmektedir sözderel=titledata-titlerel sadece çapa için olmak üzere) ve ayrıca eski tarayıcılar için "son çare" olarak çalışmaktadır.

Ayrıca data-toggle="tooltip"yukarıdaki kodu kullanıyorsanız özelliğe ihtiyacınız olmadığını unutmayın.

Önyükleme araç ipuçları pahalıdır, çünkü öğelerin her birinde fare olaylarını işlemeniz gerekir. Varsayılan olarak etkinleştirmemelerinin nedeni budur. Bu nedenle, yukarıdaki satırdan yorum yapmaya karar verirseniz, başlık niteliğini kullanırsanız sayfanız yine de çalışır.

Title niteliğini kullanmıyorsanız, Hint.css gibi saf CSS çözümlerini kullanmanızı veya herhangi bir JavaScript kodu gerektirmeyen http://csstooltip.com adresini kontrol etmenizi tavsiye ederim .

— Şital Şah
kaynak
Bununla mücadele ediyorum çünkü dinamik nesil birkaç seviye derine gidiyor. Href değeri dinamik olarak oluşturulan içeriktir ve sonuçta elde edilen div kimliği, href değeriyle eşleşen öğe numarasına dayanır. Öyleyse A Tipi Öğe bağlantılarının bir sayfasına sahipsem, o zaman a-1, a-2, a-3, a-3 öğelerinin bir listesine sahibim, bu bağlantıların her biri tek tek sayfalara ait, ama istiyorum fareyle üzerine gelindiğinde dinamik içeriği görüntülemek için araç ipucu içeriği, böylece kullanıcı tam bağlantıyı tıklamadan önce öğe hakkında fikir edinebilir.
— Melanie Sumner
Bu en yararlı oldu. Bir simgeye bağlanmak için ayarlanmış araç ipucu vardı ve simge kitaplığı, bağlanamadığı için eşzamansız yükleme bir tür vardı. Çok garipti çünkü sınıf seçicisini kullanırken işe yarayacaktı, ancak ID kullanmıyordu. Yardımın için teşekkürler!
— Nick Woodhams
14

Bu en basit yol. Bunu daha önce koy </body>:

<script type="text/javascript">
    $("[data-toggle=\"tooltip\"]").tooltip();
</script>

Bootstrap'ın araç ipuçları hakkındaki belgelerinde verilen örneklere göz atın .

Örneğin: 

<a href="#"
   data-toggle="tooltip"
   data-placement="bottom"
   title="Tooltip text here">Link with tooltip</a>
— Marcos Cassiano
kaynak
2
lütfen type özelliğini kapatın ... sadece tek bir yazım hatasını düzenlemek bir PITA: S
— Mohd Abdul Mujib
10

Araç ipucu ve popover, yalnızca açılır menü veya ilerleme çubuğu gibi css eklentiler DEĞİLDİR. Araç ipuçlarını ve popover'ı kullanmak için jquery'yi (javascript'i okuyun) kullanarak etkinleştirmeniz GEREKİR.

Diyelim ki, bir html düğmesine tıklandığında bir popover gösterilmesini istiyoruz.

<a href="#" role="button" 
     class="btn popovers-to-be-activated" 
     title="" data-content="And here's some amazing content." 
     data-original-title="A Title" "
>button</a>

Sonra popover'ı etkinleştirmek için aşağıdaki javascript koduna sahip olmanız gerekir:

$('.popovers-to-be-activated').popover();

Aslında, yukarıdaki javascript kodu "etkinleştirilecek popovers" sınıfı olan tüm html öğelerinde popover etkinleştirir.

Söylemeye gerek yok, DOM hazır olur olmaz tüm popover'ları etkinleştirmek için yukarıdaki javascript'i DOM uyumlu geri aramaya koyun:

$(function() {
 // Handler for .ready() called.
 $('.popovers-to-be-activated').popover();
});
— Mayank Jaiswal
kaynak
5

baş bölümünde önce aşağıdaki kodu eklemeniz gerekir

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/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>

Daha sonra gövde bölümüne aşağıdaki kodu yazmanız gerekir

<p>The data-placement attribute specifies the tooltip position.</p>
<ul class="list-inline">
<li><a href="#" data-toggle="tooltip" data-placement="top" title="Hooray!">Top</a></li>
<li><a href="#" data-toggle="tooltip" data-placement="bottom" title="Hooray!">Bottom</a></li>
<li><a href="#" data-toggle="tooltip" data-placement="left" title="Hooray!">Left</a></li>
<li><a href="#" data-toggle="tooltip" data-placement="right" title="Hooray!">Right</a></li>

— Rush.2707
kaynak
4

Her şey hala çözülmediyse En Son Jquery kitaplığını kullanın, en son bootstrap 2.0.4 ve jquery-1.7.2.js'yi kullanırsanız jquery seçicilerine ihtiyacınız yoktur.

Sadece kullan rel="tooltip" title="Your Title" data-placement=" "

Veri yerleşiminde isteğinize göre üst / alt / sol / sağ tuşlarını kullanın.

— Harish Kumar
kaynak
3

Başlığa jquery ve bootstrap-tooltip.js'yi ekledim. Bu kodu altbilgiye eklemek benim için işe yarıyor! ama aynı kodu başlıkta eklediğimde işe yaramaz! 

<script type="text/javascript">
$('.some-class').tooltip({ selector: "a" });
</script>
— Karthik
kaynak
3
Bu durumda DOM henüz yüklenmediği için sayfadaki tüm öğelerim yok. Yukarıdaki kodu sarın$(function() { ... });
— johnml
3

Rails + Haml kullanmak araç ipucunu eklemek için çok daha kolaysa, şunları yapın:

= link_to '', some_path(), :class => "btn btn-success btn-mini icon-plane", :rel => "tooltip", :title => "Referential Guide"

Sadece elemanın sonuna aşağıdaki satırı ekleyin.

:rel => "tooltip", :title => "Referential Guide"
— Andres Calle
kaynak
Gerçekten benim için işe yarayacağını umuyordu, ama ne yazık ki olmadı.
— turboladen
Şimdi Rails daha Djanto içine ama kodunuzu yapıştırırsanız size bir ipucu vermeye çalışabilirsiniz.
— Andres Calle
3

Benim özel durumumda, jQuery'nin iki sürümünü eklediğim için işe yaramadı. Biri bootstrap için, diğeri (başka bir sürüm) Google Charts için.

Grafikler için jQuery yüklemesini kaldırdığımda iyi çalışıyor.

— diyet yapan
kaynak
3

Az önce ekledim:

<script src="http://getbootstrap.com/assets/js/docs.min.js"></script>

bootstrap.min.js altında çalışır ve çalışır.

— Andy.sin
kaynak
3

Araç İpuçlarının belgenizdeki herhangi bir HTML öğesine nasıl eklenebileceğini göstermek için bir örnek kullanalım.

NOT:

Bu araç ipucu örnekleri, sayfanıza koyduğunuzda çalışmazsa, başka bir sorununuz daha vardır. Şöyle şeylere bakmanız gerekir:

  • Komut dosyalarının sırası dahil
  • Kaldırılan HTML öğelerini başlatmaya çalışıp çalışmadığınızı görün
  • Artık eklemediğiniz JS dosyalarındaki yöntemleri çağırmaya çalışıp çalışmadığınızı görün

  • İhtiyacınız olan işlevselliği sağlayan JS dosyasını ekleyip eklemediğinize bakın (yalnızca araç ipuçları için değil, sayfada kullandığınız bileşenler için).

    <head>
    <link rel="stylesheet" href="/Content/bootstrap.css" />
    <link rel="stylesheet" href="/Content/animate.css" />
    <link rel="stylesheet" href="/Content/style.css" />
</head>
<body>
    ... your HTML code ...
    <script src="/Scripts/jquery-2.1.1.js"></script>
    <script src="/Scripts/bootstrap.min.js"></script>
    <script src="/Scripts/app/inspinia.js"></script> <!-- if using INSPINIA -->
    ... your JavaScript initializers ...
</body>

Yukarıdaki öğelerin HERHANGİ BİRİNİ başarısızlığı, javascript'in yüklenmesini ve / veya çalışmasını engelleyebilir (ve çoğu zaman yapar) ve bu her şeyi güzel ve kırık tutar.

ÇALIŞMA ÖRNEKLERİ

Diyelim ki bir rozetiniz var ve kullanıcı üzerine geldiğinde bir ipucu göstermesini istiyorsunuz.

Orijinal HTML:

<span class="badge badge-sm badge-plain">Admin Mode</span>

Düz Bootstrap Araç İpuçları

Bir HTML Öğesi için araç ipuçları oluşturuyorsanız ve Düz Önyükleme araç ipuçları kullanıyorsanız, Araç İpucu Başlatıcılarını kendi JavaScript kodunuzla çağırmaktan sorumlu olacaksınız.

ÖNCE

<span class="badge badge-sm badge-plain">Admin Mode</span>

SONRA

<span 
    class="badge badge-sm badge-plain" 
    data-toggle="tooltip" 
    data-placement="right" 
    title="Tooltip on right" 
 >Admin Mode</span>

başlatıcısı

<script>
    // Initialize any Tooltip on this page
    $(document).ready(function () 
        {
            $('[data-toggle="tooltip"]').tooltip();
        }
    );
</script>

Önyükleme Şablonu İpuçları (INSPINIA gibi)

Bir önyükleme şablonu (INSPINIA gibi) kullanıyorsanız, şablon özelliklerini desteklemek için destekleyici bir komut dosyası dahil edersiniz:

    <script src="/Scripts/app/inspinia.js" />

INSPINIA söz konusu olduğunda, dahil edilen komut dosyası, belgenin yüklenmesi tamamlandığında aşağıdaki javascript kodunu çalıştırarak tüm araç ipuçlarını otomatik olarak başlatır:

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

Bu nedenle, INSPINIA stili Araç İpuçlarını kendiniz başlatmanız gerekmez. Ancak öğelerinizi belirli bir şekilde biçimlendirmeniz gerekir. Başlatıcı öznitelikte tooltip-demobulunan HTML öğelerini arar class, ardından özniteliği olan alt öğeleri tooltip()başlatma yöntemini çağırırdata-toggle="tooltip" tanımlanmış .

Örneğimizde rozeti için, (a gibi etrafında bir dış elemanı yerleştirmek <div>ya <span>vardır) class="tooltip-demo", daha sonra koyun data-toggle, data-placementve titlerozeti eleman içindeki gerçek ipucu için özelliklerini. Bunun gibi bir şeye bakmak için orijinal HTML'yi yukarıdan değiştirin:

ÖNCE

<span class="badge badge-sm badge-plain">Admin Mode</span>

SONRA

<span class="tooltip-demo">
    <span 
        class="badge badge-sm badge-plain" 
        data-toggle="tooltip" 
        data-placement="right" 
        title="Tooltip on right" 
     >Admin Mode</span>
</span>

başlatıcısı

None

İçindeki tüm alt öğelerin <span class="tooltip-demo"> araç ipuçlarının düzgün bir şekilde hazırlanacağını unutmayın. Her biri araç ipucu gerektiren üç alt öğeye sahip olabilir ve bunları bir kaba yerleştirebilirim.

Her birinde Araç İpucu bulunan Birden Çok Öğe

<span class="tooltip-demo">
    <span class="badge badge-sm badge-plain" data-toggle="tooltip" data-placement="right" title="A Tooltip">Text 001</span>
    <span class="badge badge-sm badge-plain" data-toggle="tooltip" data-placement="right" title="Another Tooltip">Text 002</span>
    <span class="badge badge-sm badge-plain" data-toggle="tooltip" data-placement="right" title="Third Tooltip">Text 003</span>
</span>

Bunun için en iyi kullanım class="tooltip-demo", a <td>veya en dıştaki <div>veya işaretini eklemektir <span>.

Şablon kullanırken Düz Önyükleme Araç İpuçları

INSPINIA kullanıyorsanız, ancak araç ipuçları oluşturmak için fazladan dış <div>veya <span>etiket eklemek istemiyorsanız , şablona müdahale etmeden standart Önyükleme Araç İpuçları kullanabilirsiniz. Bu durumda, Araç İpuçlarını kendiniz başlatmanız sizin sorumluluğunuzdadır. Ancak, Araç classİpucu öğelerinizi tanımlamak için öznitelikte özel bir değer kullanmalısınız . Bu, Araç İpucu başlatıcısının INSPINIA'dan etkilenen öğelere müdahale etmesini önler. Örneğimizde kullanalım standalone-tt:

ÖNCE

<span class="badge badge-sm badge-plain">Admin Mode</span>

SONRA

<span 
    class="standalone-tt badge badge-sm badge-plain" 
    data-toggle="tooltip" 
    data-placement="right" 
    title="Tooltip on right" 
 >Admin Mode</span>

başlatıcısı

<script>
    // Initialize MY standalone tooltips, ignoring INSPINIA-affected elements
    $(document).ready(function () 
        {
            $('.standalone-tt').tooltip();
        }
    );
</script>
— Mike Stillion
kaynak
2

Javascript ile araç ipucunu içeren html'nizi oluşturuyor ve ardından belgeye ekliyorsanız, html'yi belge yüklemede değil belgeye ekledikten sonra popover / tooltip'i etkinleştirmeniz gerekiyor ...

— chri_chri
kaynak
2

HTML'den sonra ipucu javascript'i koymalısınız . bunun gibi :

<a href="#" rel="tooltip" title="Title Here"> I am Here</a>

<script>
$("* [rel='tooltip']").tooltip({
   html: true, 
   placement: 'bottom'
});

</script>

Veya $ (belge) kullanın. Zaten: 

$(document).ready(function() {

$("* [rel='tooltip']").tooltip({
   html: true, 
   placement: 'bottom'
});

});

</script>

Tooltip html'yi javascript'ten önce koyduğunuz için çalışmıyor , bu nedenle ipucu için bir javascript olup olmadığını bilmiyorlar. Bence, senaryo yukarıdan aşağıya doğru okunur.

— yakınlaştırma
kaynak
2

Benzer bir sorunum vardı ve özellikle dikey düğme kabı gibi bir düğme kabında çalışıyorsanız. Bu durumda kabı 'gövde' olarak ayarlamanız gerekir

I have added a jsfiddle example

misal

— Shawn Vader
kaynak
1

Araç ipuçlarındaki önyükleme belgelerinden

Araç ipuçları performans nedenleriyle tercih edilir, bu nedenle bunları kendiniz başlatmalısınız. Bir sayfadaki tüm araç ipuçlarını başlatmanın bir yolu, bunları veri değiştirme özelliklerine göre seçmek olacaktır:

  $('[data-toggle="tooltip"]').tooltip()
— Rahil Ahmad
kaynak
0

data-toggle="tooltip"Bir araç ipucu ile istediğiniz öğelere ekleyin .

— Calum Childs
kaynak
0

Aşağıdakileri yapmanız gerekir. Ekle

<script type="text/javascript">
    $(function () {
        $("[rel='tooltip']").tooltip();
    });
</script>

sayfanızın herhangi bir yerinde kodlayın (tercihen <head>bölümde).

Ayrıca data-toggle: "tooltip"onunla etkinleştirmek istediğiniz her şeyi ekleyin .

— Calum Childs
kaynak
0

Popper.js'yi kullanabilirsiniz

<script src="JavaScript/popper.min.js"></script>
<script src="JavaScript/bootstrap.min.js"></script>

Ve araç ipucu işlevini çağırın:

$('document').ready(function(){
    $('[data-toggle=tooltip]').tooltip();
});
— Mohsen Newtoa
kaynak
-2

Bootstrap araç ipucu eklentisine hızlı ve hafif bir alternatif:

HTML:

<div>
    <div class="mytooltip" id="pwdLabel">
        <label class="control-label" for="password">Password</label>

        <div class="mytooltiptext" id="pwdLabel_tttext">
            6 characters long, must include letters and numbers
        </div>                                

    </div>

    <input type="password" name="password" value="" id="password" autocomplete="off"
           class="form-control" 
           style="width:125px" />
</div>

CSS:

<style>
    .mytooltiptext {
        position: absolute;
        left: 0px;
        top: -45px;
        background-color: black;
        color: white;
        border: 1px dashed silver;
        padding:3px;
        font-size: small;
        text-align: center;
    }

    .mytooltip {
        position: relative;
    }

    .mytooltip label {
        border-bottom: 1px dashed black !important;
    }
</style>

JSCRIPT:

$(".mytooltip").mouseover(function(){
    var elm = this.id;
    $("#" + elm + "_tttext").fadeIn("slow");
});

var ttTmo;
$(".mytooltip").mouseout(function(){
    var elm = this.id;
    clearTimeout(ttTmo);
    ttTmo = setTimeout(function(){
        $("#" + elm + "_tttext").fadeOut("slow");
    },3000);
});

Etiket / metin "mytooltip" sınıfındaki bir paket içine alınmalıdır. Bu paketin kimliği olmalıdır.

Etiketten sonra, "mytooltiptext" sınıfının ve id sarmalayıcısının + "_tttext" kimliğinden oluşan kimliğin bir bölümü içine sarılmış araç ipucu metni vardır. Seçiciler için diğer seçenekler de kullanılabilir.

Umarım yardımcı olur.

— jdisla
kaynak
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.