Kontrol bootstrap dengan beberapa "data-toggle"

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

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>

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

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

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

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

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>

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").

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

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>

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>

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

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>

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