260

Saya menjadi gila di sini.

Saya punya HTML berikut:

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

Dan tooltip gaya Bootstrap menolak untuk ditampilkan, hanya tip alat biasa.

Saya punya bootstrap.css bekerja dengan baik, dan saya bisa melihat kelas di sana

Saya memiliki semua file JS yang relevan di akhir file HTML saya:

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

Saya telah melihat sumber dari contoh Bootstrap dan tidak dapat melihat apa pun yang menginisiasi tooltip di mana saja di sana. Jadi saya kira itu hanya bekerja, atau saya kehilangan sesuatu yang penting di sini?

Saya punya modals dan alert dan hal-hal lain berfungsi dengan baik, jadi saya bukan orang tolol;)

Terima kasih atas bantuannya!

twitter-bootstrap Mike Bartlett
sumber

2

Tooltip sedang diinisiasi dalam file application.js dalam contoh twitters. Bisakah Anda memposting html Anda? Ingin melihat bagaimana Anda menginisialisasi skrip.

Andres Ilich

2

Ahhhhh .... Saya mengabaikannya karena diberi komentar pertama. Jadi seandainya ini bekerja: code<a href="#" rel="tooltip" title="A tooltip" class="tooltip-test"> test </a> yang bagus </a> <br> <script> // demo tooltip $ (' .tooltip-test '). tooltip () </script>

Mike Bartlett

1

jangan lupa untuk menyerahkan pemilih ke opsi tooltip,$('.tooltip-test').tooltip({ selector: "a" })

Andres Ilich

Terima kasih Andres. Sebenarnya saya sepertinya tidak membutuhkan pemilih di sana, saya pikir itu karena kelas a dirujuk sebagai tooltip-test.

Mike Bartlett

3

Tanpa opsi pemilih, tooltip tidak berfungsi untuk saya, berikut adalah demo yang saya pasang: jsfiddle.net/VXctp , cobalah tanpa pemilih.

Andres Ilich

276

Singkatnya: aktifkan tooltips Anda menggunakan pemilih jQuery

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

Bahkan, Anda tidak perlu menggunakan pemilih atribut, Anda dapat memintanya pada elemen apa pun meskipun tidak ada rel="tooltip"di tag-nya.

Manuel Ebert
sumber

13

Bagi mereka yang bekerja dengan Rails, ini sudah didefinisikan bootstrap.js.coffeedengan $(".tooltip").tooltip(). Pastikan Anda memasukkannya ke //= require bootstrapdalam application.js.

slhck

6

Menambahkan kelas .tooltip ke elemen apa pun akan mematahkan tooltips untuk saya. Konten di dalam elemen dengan kelas .tooltip akan disembunyikan dan tooltip akan ditampilkan jika saya berhasil menemukan elemen tersembunyi dengan mouse saya. Menggunakan pemilih atau nama kelas lain akan berfungsi dengan baik. \

Leonel Galán

4

@Leito yang benar, bootstrap mendefinisikan gaya untuk .tooltipdan secara default, mereka tidak terlihat. Anda dapat menggunakan relatribut atau kelas lain sebagai pemilih.

Manuel Ebert

3

Ya, Anda perlu KEDUA Markup HTML dan Pemilih JS. Ini bukan cara alternatif untuk menerapkan tooltips.

ATSiem

1

Beberapa mungkin mencoba untuk menampilkan tooltip dalam modal dan ini tidak berfungsi di semua versi bootstrap. Jika Anda mencobanya di halaman normal, bukan modal, dan berfungsi, maka Anda tahu itu masalahnya.

mjnissim

212

Setelah mengalami masalah yang sama, saya menemukan solusi ini berfungsi tanpa harus menambahkan atribut tag tambahan di luar atribut yang diperlukan Bootstrap.

HTML

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

JQuery

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

Semoga ini membantu!

Marcus Hoelscher
sumber

20

Terima kasih! Ini berhasil untuk saya. Entah bagaimana solusi lain pada halaman ini tidak berfungsi untuk saya.

Roman

1

Saya dengan Roman. Solusi ini juga berfungsi dengan varian css bootswatch.

DaveCS

Ini berhasil untuk saya. Tidak ada yang menendang dalam hidup sampai saya mencoba ini. Terima kasih!

BlakePetersen

1

Ini juga berhasil bagi saya. Tahu mengapa $ ('[data-toggle = "tooltip"]'). Tooltip ({'penempatan': 'top'}); tidak bekerja?

ZeroCool

Terima kasih, ini berhasil untuk saya. Pastikan Anda memasukkan kode di antara tag <script> SETELAH Anda memuat pustaka JQuery.

GeraldScott

31

Anda tidak memerlukan semua file js secara terpisah

Cukup gunakan file-file berikut jika Anda akan menggunakan semua fungsi bootstrap:

-bootstrap.css
-bootstrap.js

keduanya dapat ditemukan di http://twitter.github.com
dan akhirnya
- Versi terbaru dari jquery.js

Untuk Glyphicons Anda memerlukan gambar

glyphicons-halfings.png dan / atau glyphicons-halfings-white.png (gambar berwarna putih)
yang perlu Anda unggah di dalam / img / folder situs web Anda (atau) simpan di mana pun Anda inginkan, tetapi ubah direktori folder di dalam bootstrap .css

Untuk tooltip Anda memerlukan skrip berikut di dalam <head> </head>tag Anda

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

Itu dia...

Harish Kumar
sumber

27

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

Fungsi keikutsertaan Demi alasan kinerja, apt data Tooltip dan Popover adalah keikutsertaan, artinya

Anda harus menginisialisasi sendiri.

Salah satu cara untuk menginisialisasi semua tooltips pada halaman adalah dengan memilihnya berdasarkan atribut toggle data:

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

menempatkan potongan kode ini di html Anda memungkinkan Anda untuk menggunakan tooltips

Contoh:

<!-- 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.
sumber

2

Terima kasih telah membagikan konsep keikutsertaan ini! Jangan pernah membacanya dari tutorial apa pun.

dpp

Solusi untuk semua jquery / bootstrap tooltip whoas saya

DJ Burb

Tautan yang disediakan tidak ada: silakan lihat getbootstrap.com/docs/4.1/components/tooltips

Guillaume Husta

20

Saya tahu ini adalah pertanyaan lama, tapi karena saya punya masalah dengan rilis baru bootstrap dan tidak jelas di situs web, di sini adalah bagaimana Anda mengaktifkan tooltip.

berikan elemen Anda kelas seperti "tooltip-test"

kemudian aktifkan kelas ini di tag javascript Anda:

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

<a href="#" class="tooltip-test" title="" data-original-title="Tooltip">This link</a>

Amir Soleymani
sumber

Ini adalah satu-satunya solusi yang berhasil untuk saya. Saya menggunakan data-original-title = "{{someAngularJSVar}}" "untuk memperbarui judul dan itu berfungsi dengan sempurna.

WKara

19

HTML

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

JQuery

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

Yang ini bekerja untuk saya.

Igor Shvydok
sumber

1

Proposal ini bekerja dengan baik untuk saya juga. Saya menyukainya karena sederhana dan elegan. Ini memungkinkan Anda tetap menggunakan standar Bootstrap seolah-olah plugin secara default diinisilisasi, seperti yang terjadi dengan elemen Dropdown dan Tab. Saya menambahkan JS yang diusulkan oleh @Igor ke file baru dan membundelnya ke bootstrap.js asli

Iago Rodríguez-Quintana

14

Jika Anda melakukan $("[rel='tooltip']").tooltip();seperti yang disarankan jawaban lain maka Anda akan mengaktifkan tooltips hanya pada elemen yang saat ini ada di DOM. Itu berarti jika Anda akan mengubah DOM dan menyisipkan konten dinamis nantinya tidak akan berfungsi. Juga ini jauh lebih efisien karena menginstal pengendali acara untuk elemen individual dibandingkan dengan menggunakan delegasi acara JQuery. Jadi cara terbaik yang saya temukan untuk mengaktifkan Bootstrap tooltips adalah satu baris kode ini yang dapat Anda tempatkan dalam dokumen siap dan lupakan:

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

Perhatikan bahwa saya menggunakan titlesebagai pemilih alih-alih rel=titleatau data-title. Ini memiliki keunggulan yang dapat diterapkan ke banyak elemen lain ( relyang seharusnya menjadi hanya untuk jangkar) dan juga bekerja sebagai "fallback" untuk browser lama.

Perhatikan juga bahwa Anda tidak perlu data-toggle="tooltip"atribut jika menggunakan kode di atas.

Tip bootstrap mahal karena Anda perlu menangani acara mouse pada masing-masing elemen. Ini adalah alasan mengapa mereka tidak mengaktifkannya secara default. Jadi, jika Anda memutuskan untuk berkomentar di atas baris, halaman Anda akan tetap berfungsi jika Anda menggunakan atribut judul.

Jika Anda OK untuk tidak menggunakan atribut judul maka saya akan merekomendasikan menggunakan solusi CSS murni seperti Hint.css atau periksa http://csstooltip.com yang tidak memerlukan kode JavaScript sama sekali.

Shital Shah
sumber

Saya berjuang dengan yang satu ini karena generasi yang dinamis berjalan dalam beberapa level. Nilai href adalah konten yang dihasilkan secara dinamis dan id id yang dihasilkan didasarkan pada nomor item yang cocok dengan nilai href. Jadi jika saya memiliki halaman tautan Item Tipe A, maka saya memiliki daftar item a-1, item a-2, item a-3, masing-masing tautan tersebut adalah ke item halaman individual, tetapi saya ingin konten tooltip untuk menampilkan konten dinamis saat membawa, sehingga pengguna dapat mengetahui beberapa item sebelum mengklik tautan lengkap.

Melanie Sumner

Ini yang paling membantu. Saya memiliki tooltip yang diatur untuk mengikat ke ikon, dan perpustakaan ikon memiliki semacam memuat asinkron sehingga tidak bisa mengikat. Itu sangat aneh karena akan bekerja ketika menggunakan pemilih kelas tetapi tidak ID. Terima kasih untuk bantuannya!

Nick Woodhams

14

Ini adalah cara paling sederhana. Letakkan ini sebelum </body>:

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

Lihatlah contoh-contoh yang diberikan dalam dokumentasi Bootstrap tentang tooltips .

Sebagai contoh:

<a href="#"
   data-toggle="tooltip"
   data-placement="bottom"
   title="Tooltip text here">Link with tooltip</a>

Marcos Cassiano
sumber

2

tolong tutup atribut type ... pengeditan hanya satu kesalahan ketik adalah PITA: S

Mohd Abdul Mujib

10

Tooltip dan popover BUKAN hanya plugin css seperti dropdown atau progressbar. Untuk menggunakan tooltips dan popover, Anda HARUS mengaktifkannya menggunakan jquery (baca javascript).

Jadi, katakanlah kita ingin popover ditampilkan pada klik tombol html.

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

Maka Anda harus memiliki kode javascript berikut untuk mengaktifkan popover:

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

Sebenarnya, kode javascript di atas akan mengaktifkan popover pada semua elemen html yang memiliki kelas "popovers-to-be-activated".

Tidak perlu dikatakan, letakkan javascript di atas di dalam callback siap-DOM untuk mengaktifkan semua popover segera setelah DOM siap:

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

Mayank Jaiswal
sumber

5

di bagian kepala Anda perlu menambahkan kode berikut terlebih dahulu

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

Kemudian di bagian tubuh Anda perlu menulis kode berikut

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

4

Jika semuanya masih belum terselesaikan Gunakan pustaka Jquery terbaru, Anda tidak memerlukan pemilih jquery mana pun jika Anda menggunakan bootstrap 2.0.4 terbaru dan jquery-1.7.2.js

Gunakan saja rel="tooltip" title="Your Title" data-placement=" "

Gunakan atas / bawah / kiri / kanan dalam penempatan data sesuai keinginan Anda.

Harish Kumar
sumber

3

Saya telah menambahkan jquery dan bootstrap-tooltip.js di header. Menambahkan kode ini di footer berfungsi untuk saya! tetapi ketika saya menambahkan kode yang sama di header itu tidak berfungsi!

<script type="text/javascript">
$('.some-class').tooltip({ selector: "a" });
</script>

Karthik
sumber

3

Dalam hal ini DOM belum dimuat sehingga semua elemen saya tidak ada di halaman. Bungkus kode di atas dalam$(function() { ... });

johnml

3

Jika menggunakan Rails + Haml jauh lebih mudah untuk memasukkan tooltip, lakukan saja:

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

Itu hanya menambahkan baris berikut di akhir elemen.

:rel => "tooltip", :title => "Referential Guide"

Andres Calle
sumber

Benar-benar berharap itu akan bekerja untuk saya, tetapi sayangnya itu tidak berhasil.

turboladen

Sekarang saya lebih ke Djanto daripada Rails tetapi jika Anda menempelkan kode Anda, saya mungkin akan mencoba memberi Anda beberapa tip.

Andres Calle

3

Dalam kasus khusus saya, itu tidak berhasil karena saya menyertakan dua versi jQuery. Satu untuk bootstrap, tetapi satu lagi (versi lain) untuk Google Charts.

Ketika saya menghapus pemuatan jQuery untuk grafik, itu berfungsi dengan baik.

Diet
sumber

3

Saya baru saja menambahkan:

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

di bawah bootstrap.min.js dan berfungsi.

Andy
sumber

3

Mari kita gunakan contoh untuk menunjukkan bagaimana Tooltips dapat ditambahkan ke elemen HTML apa pun dalam dokumen Anda.

CATATAN:

Jika sampel tooltip ini tidak berfungsi saat Anda menempatkannya di halaman Anda, maka Anda memiliki masalah lain. Anda perlu melihat hal-hal seperti:

Urutan skrip yang disertakan
Lihat apakah Anda mencoba menginisialisasi elemen HTML yang telah dihapus
Lihat apakah Anda mencoba memanggil metode dalam file JS yang tidak lagi Anda sertakan

Lihat apakah Anda menyertakan file JS yang menyediakan fungsionalitas yang Anda butuhkan (tidak hanya untuk tooltips, tetapi komponen apa pun yang Anda gunakan pada halaman).

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

Kegagalan APAPUN dari item di atas dapat (dan sering kali) mencegah javascript memuat dan / atau berjalan, dan itu membuat semuanya bagus dan rusak.

CONTOH KERJA

Katakanlah Anda memiliki lencana, dan Anda ingin itu menunjukkan tooltip ketika pengguna mendekatinya.

HTML asli:

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

Tip Bootstrap Biasa

Jika Anda membuat tooltips untuk Elemen HTML, dan Anda menggunakan tooltips Boot Plain, maka Anda akan bertanggung jawab untuk memanggil Initializers Tooltip dengan kode JavaScript Anda sendiri.

SEBELUM

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

SETELAH

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

INITIALIZER

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

Bootstrap Template Tooltips (seperti INSPINIA)

Jika Anda menggunakan template bootstrap (seperti INSPINIA), Anda menyertakan skrip pendukung untuk mendukung fitur templat:

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

Dalam kasus INSPINIA, skrip yang disertakan secara otomatis menginisialisasi semua tooltips dengan menjalankan kode javascript berikut ketika dokumen selesai dimuat:

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

Karena itu, Anda TIDAK harus menginisialisasi Tooltips gaya INSPINIA sendiri. Tetapi Anda harus memformat elemen Anda dengan cara tertentu. Initializer mencari elemen HTML dengan tooltip-demodalam classatribut, lalu memanggil tooltip()metode untuk menginisialisasi elemen anak yang memiliki atribut yang data-toggle="tooltip"ditentukan.

Misalnya lencana kami, menempatkan unsur luar di sekitarnya (seperti <div>atau <span>) yang memiliki class="tooltip-demo", maka tempatkan data-toggle, data-placementdan titleatribut untuk tooltip sebenarnya dalam unsur yang lencana. Ubah HTML asli dari atas agar terlihat seperti ini:

SEBELUM

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

SETELAH

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

INITIALIZER

None

Perhatikan bahwa setiap elemen anak dalam <span class="tooltip-demo"> elemen akan menyiapkan tooltip mereka dengan benar. Saya dapat memiliki tiga elemen anak, semua membutuhkan tooltips, dan menempatkannya dalam satu wadah.

Beberapa Item, masing-masing dengan Tooltip

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

Penggunaan terbaik untuk ini adalah dengan menambahkan class="tooltip-demo"ke <td>atau terluar <div>atau <span>.

Tooltips Bootstrap Biasa saat menggunakan Template

Jika Anda menggunakan INSPINIA, tetapi Anda tidak ingin menambahkan ekstra luar <div>atau <span>tag untuk membuat tooltips, Anda dapat menggunakan Bootstrap Tooltips standar tanpa mengganggu template. Dalam hal ini, Anda akan bertanggung jawab untuk menginisialisasi Tooltips sendiri. Namun, Anda harus menggunakan nilai khusus dalam classatribut untuk mengidentifikasi item Tooltip Anda. Ini akan menjaga initializer Tooltip Anda tidak mengganggu elemen yang dipengaruhi oleh INSPINIA. Dalam contoh kita, mari kita gunakan standalone-tt:

SEBELUM

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

SETELAH

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

INITIALIZER

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

Mike Stillion
sumber

2

Jika Anda membuat html Anda yang berisi tooltip dengan javascript, dan kemudian memasukkannya ke dalam dokumen, Anda harus mengaktifkan popover / tooltip SETELAH Anda telah memasukkan html ke dalam dokumen, bukan pada pemuatan dokumen ...

chri_chri
sumber

2

Anda harus meletakkan tooltip javascript setelah html. seperti ini :

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

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

</script>

Atau gunakan $ (dokumen). Sudah:

$(document).ready(function() {

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

});

</script>

Tooltip tidak berfungsi karena Anda meletakkan tooltip html di depan javascript , sehingga mereka tidak tahu apakah ada javascript untuk tooltip. Menurut pendapat saya, skrip dibaca dari atas ke bawah.

Perbesar
sumber

2

Saya punya masalah serupa dan terutama jika Anda menjalankan wadah tombol seperti wadah tombol vertikal. Dalam hal ini Anda harus mengatur wadah sebagai 'tubuh'

I have added a jsfiddle example

contoh

Shawn Vader
sumber

1

Masukkan kode Anda di dalam dokumen siap

$(document).ready(function () {
    if ($("[rel=tooltip]").length) {
        $("[rel=tooltip]").tooltip();
    }
});

Dalam kasus saya, saya juga melewatkan kelas tooltip css di http://twitter.github.com/bootstrap/assets/css/bootstrap.css jadi jangan lupa.

Joao Leme
sumber

1

Dari dokumentasi bootstrap pada tooltips

Tooltips memilih ikut serta karena alasan kinerja, jadi Anda harus menginisialisasi sendiri. Salah satu cara untuk menginisialisasi semua tooltips pada halaman adalah dengan memilihnya berdasarkan atribut toggle data:

  $('[data-toggle="tooltip"]').tooltip()

Rahil Ahmad
sumber

0

Tambahkan data-toggle="tooltip"elemen apa pun yang Anda inginkan dengan tooltip.

Calum Childs
sumber

0

Anda perlu melakukan hal berikut. Tambahkan

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

kode di suatu tempat di halaman Anda (lebih disukai di <head>bagian).

Tambahkan juga data-toggle: "tooltip"apa pun yang ingin Anda aktifkan dengannya.

Calum Childs
sumber

0

Anda dapat menggunakan Popper.js

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

Dan memanggil fungsi tooltip:

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

Mohsen Newtoa
sumber

-2

Alternatif cepat dan lebih ringan untuk plugin Bootstrap tooltip:

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);
});

Label / teks harus dimasukkan dalam pembungkus kelas "mytooltip" Pembungkus ini harus memiliki Id.

Setelah label ada teks tip alat yang dibungkus dengan div kelas "mytooltiptext" dan id yang terdiri dari id dari pembungkus induk + "_tttext". Opsi lain untuk penyeleksi dapat digunakan.

Semoga ini bisa membantu.

jdisla
sumber

Tip bootstrap tidak berfungsi

Jawaban:

CATATAN:

CONTOH KERJA

Tip Bootstrap Biasa

Bootstrap Template Tooltips (seperti INSPINIA)

Beberapa Item, masing-masing dengan Tooltip

Tooltips Bootstrap Biasa saat menggunakan Template

HTML:

CSS:

JSCRIPT: