Kontrol bootstrap dengan beberapa "data-toggle"


153

Apakah ada cara untuk menetapkan lebih dari satu peristiwa ke kontrol bootstrap melalui "data-toggle". Sebagai contoh, katakanlah saya ingin tombol yang memiliki "tooltip" dan "tombol" beralih ditugaskan padanya.
Mencoba data-toggle = "tombol tooltip", tetapi hanya tooltip yang berfungsi.

EDIT:

Ini mudah "dapat diatasi" dengan

$("#newbtn").toggleClass("active").toggleClass("btn-warning").toggleClass("btn-success");

Jawaban:


330

Jika Anda ingin menambahkan modal dan tooltip tanpa menambahkan javascript atau mengubah fungsi tooltip, Anda juga bisa membungkus elemen di sekitarnya:

<span data-toggle="modal" data-target="modal">
    <a data-toggle="tooltip" data-placement="top" title="Tooltip">
      Hover Me           
    </a>
</span>

6
Itu sebenarnya adalah pendekatan terbaik karena itu mengurangi kepedulian presentasi ke lapisan presentasi.
LastTribunal

3
Namun ada beberapa perbedaan: data-toggle="tooltip"elemen di dalam (tombol) utama akan ditampilkan dengan rapi di luar elemen itu sedangkan elemen tersebut akan tumpang tindih dengan elemen itu jika diatur di dalam span spanper.
Benjamin

1
terima kasih itulah yang harus dilakukan - Tidak ada javascript
tsadkan yitbarek

Solusi Singkat, Sederhana dan Cerdas. Menambahkan Span ke Anchor tag tidak mengubah desain dalam bootstrap Jadi ini adalah Solusi Sempurna untuk menjalankan model dan tooltip bersama.
ankit suthar

ini tidak berhasil untuk saya<span data-toggle="modal" data-target="#myModalForm" title="Click to edit row" data-row="0" data-cmid="425" data-id="11788" data-src="1.1.1.1" data-src_desc="null" data-dst="2.2.2.2" data-dst_desc="null" data-protocol="TCP" data-ports="80" data-remarks="none"><a class="btn btn-sm btn-info" data-toggle="tooltip" title="Click to edit row" data-original-title="Click to edit row" data-trigger="hover" href="javascript:void(0)"><i class="fa fa-pencil" aria-hidden="true"></i></a></span>
shorif2000

72

Karena tooltip tidak diinisialisasi secara otomatis, Anda dapat membuat perubahan dalam inisialisasi tooltip Anda. Saya melakukan milik saya seperti ini:

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

dengan markup ini:

<button type="button" data-target="#myModal" data-toggle="modal" data-tooltip="tooltip" class="btn btn-info" title="Your tooltip">Text here</button>

Perhatikan data-tooltip.

Memperbarui

Atau sederhananya,

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

10
Sederhanakan ini dengan: $ ('[data-tooltip = "tooltip"]'). Tooltip ();
Ryan Currah

3
Menggunakan jawaban Anda yang Diperbarui dan sangat mudah, bekerja dengan sempurna
The One and Only ChemistryBlob

1
lebih baik daripada membungkus solusi yang bagus
D3VELOPER

1
Masalah dengan ini (dan solusi lain dalam pertanyaan ini sekarang) adalah ketika Anda mengklik untuk membuka modal, dan kemudian menutupnya, tooltip muncul lagi (atau tetap terlihat) meskipun mouse telah meninggalkan tombol. Ini sangat menjengkelkan jika misalnya Anda memiliki tombol dalam tabel di setiap baris, karena mereka mungkin memblokir tombol di atas / di bawah. Satu-satunya cara untuk menyembunyikannya adalah dengan mengklik di suatu tempat di luar tooltip.
peluk

1
Saya suka pendekatan ini lebih dari jawaban yang diterima dengan bungkusnya. Ini sangat sederhana karena memperluas kapasitas HTML5 tanpa membebani DOM terlalu banyak. Juga dalam kasus saya pendekatan pembungkus sepertinya tidak berhasil
Canelo Digital

11

Saya berhasil memecahkan masalah ini tanpa perlu mengubah markup dengan jQuery berikut ini. Saya memiliki masalah serupa di mana saya ingin tooltip pada tombol yang sudah menggunakan data-toggle untuk modal. Yang perlu Anda lakukan di sini adalah menambahkan judul ke tombol.

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

9

Ini adalah solusi terbaik yang baru saja saya terapkan:

HTML

<a data-toggle="tooltip" rel="tooltip" data-placement="top" title="My Tooltip text!">Hover over me</a>

JAVASCRIPT yang harus Anda sertakan terlepas dari metode apa yang Anda gunakan.

$('[rel="tooltip"]').tooltip(); 

1
Ini adalah jawaban terbersih dan paling mencolok
Smyrnian

8

Belum. Namun, disarankan agar seseorang menambahkan fitur ini suatu hari.

Masalah bootstrap Github berikut ini menunjukkan contoh sempurna dari apa yang Anda harapkan. Itu mungkin - tetapi tidak tanpa menulis kode solusi Anda sendiri pada tahap ini sekalipun.

Saksikan berikut ini... :-)

https://github.com/twitter/bootstrap/issues/7011


Sayangnya, masalah itu (# 7011) telah ditolak.
TJ Crowder

3

Saya menggunakan href untuk memuat modal dan meninggalkan data-toggle untuk tooltip:

<a 
    data-toggle="tooltip"
    data-placement="top"
    title="My Tooltip text!"
    href="javascript:$('#id').modal('show');"
>
+
</a>

3

Karena Bootstrap memaksa Anda untuk menginisialisasi tooltips hanya melalui Javascript, saya mengubah data-toggle="tooltip"(karena tidak berguna saat itu) ke class="bootstrap-tooltip"dan menggunakan Javascript ini untuk menginisialisasi tooltips saya:

$('.bootstrap-tooltip').tooltip();

Jadi saya bebas menggunakan data-toggleatribut untuk sesuatu yang lain (misalnya data-toggle="button").


Bagus. Tambahkan HTML juga.
Web_Developer

2

Hanya untuk melengkapi @Roman Holzner jawab ...

Dalam kasus saya, saya memiliki tombol yang menunjukkan tooltip dan itu harus tetap dinonaktifkan sampai tindakan selanjutnya. Menggunakan pendekatannya, modal bekerja bahkan jika tombol dinonaktifkan, karena panggilannya berada di luar tombol - Saya dalam file blade Laravel, hanya untuk menjadi jelas :)

<span data-toggle="modal" data-target="#confirm-delete" data-href="{{ $e->id }}">
    <button name="delete" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Excluir Entrada" disabled>
        <i class="fa fa-trash fa-fw"></i>
    </button>
</span>

Jadi jika Anda ingin menunjukkan modal hanya ketika tombol aktif, Anda harus mengubah urutan tag:

<span data-toggle="tooltip" data-placement="bottom" title="Excluir Entrada" disabled>
    <button name="delete" class="btn btn-default" data-href="{{ $e->id }}" data-toggle="modal" data-target="#confirm-delete" disabled>
        <i class="fa fa-trash fa-fw"></i>
    </button>
</span>

Jika Anda ingin mengujinya, ubah atribut dengan kode JQuery:

$('button[name=delete]').attr('disabled', false);

2

Satu lagi solusi:

    <a data-toggle="modal" data-target="#exampleModalCenter">
      <span
        class="tags"
        data-toggle="tooltip"
        data-placement="right"
        title="Tooltip text"
      >
        Text
     </span>
   </a>

2

Ada solusi bagus menggunakan kelas .stretched-link. Tombol harus memiliki kelas.position-relative . Ini adalah contoh lengkap:

Tooltip harus ditambahkan ke tombol jika posisinya tidak benar.

$('[data-toggle="tooltip"]').tooltip();
/*DEMO*/.btn{margin-left:5rem;margin-top:5rem}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<!--BUTTON-->
<button class="btn btn-primary position-relative" data-toggle="tooltip" data-trigger="hover" data-placement="left" title="Tooltip text">
    <span class="stretched-link" data-toggle="modal" data-target="#exampleModal"></span>
    Click Me!
</button>

<!--DEMO MODAL-->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"><div class="modal-dialog" role="document"><div class="modal-content"><div class="modal-header"><h5 class="modal-title" id="exampleModalLabel">Modal title</h5><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button></div><div class="modal-body">Modal body</div></div></div></div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>


1

Saat Anda membuka modal pada tag dan ingin menampilkan tooltip dan jika Anda menerapkan tag tooltip di dalamnya akan menampilkan tag tooltip di dekatnya. seperti ini

masukkan deskripsi gambar di sini

Saya akan menyarankan agar gunakan div di luar tag dan gunakan "display: inline-block;"

<div data-toggle="tooltip" title="" data-original-title="Add" style=" display inline-block;">
    <a class="btn btn-primary" data-toggle="modal" data-target="#myModal" onclick="setSelectedRoleId(6)">
     <span class="fa fa-plus"></span>
    </a>
</div>

masukkan deskripsi gambar di sini


0

<a data-toggle="tooltip" data-placement="top" title="My Tooltip text!">+</a>

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.