Kontrola Bootstrap z wieloma „przełączaniem danych”

Czy istnieje sposób na przypisanie więcej niż jednego zdarzenia do kontrolki ładowania początkowego za pomocą funkcji „przełączanie danych”? Na przykład, powiedzmy, że chcę przycisk, który ma przypisaną „podpowiedź” i przełącznik „przycisk”.
Data-toggle = "tooltip button", ale działała tylko podpowiedź.

EDYTOWAĆ:

Jest to łatwe do obejścia w przypadku

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

Jeśli chcesz dodać modal i podpowiedź bez dodawania javascript lub zmiany funkcji podpowiedzi, możesz po prostu owinąć wokół niej element:

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

Ponieważ podpowiedź nie jest inicjowana automatycznie, możesz wprowadzić zmiany w inicjalizacji podpowiedzi. Zrobiłem tak:

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

z tym znacznikiem:

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

Zwróć uwagę na data-tooltip.

Aktualizacja

Lub po prostu,

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

Udało mi się rozwiązać ten problem bez konieczności zmiany jakichkolwiek znaczników za pomocą następującego fragmentu jQuery. Miałem podobny problem, gdy chciałem wyświetlić podpowiedź na przycisku, który już używał przełączania danych dla modalu. Wszystko, co musisz tutaj zrobić, to dodać tytuł do przycisku.

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

To najlepsze rozwiązanie, które właśnie wdrożyłem:

HTML

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

JAVASCRIPT, który i tak musisz dołączyć, niezależnie od używanej metody.

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

Jeszcze nie. Jednak zasugerowano, aby ktoś dodał tę funkcję pewnego dnia.

Poniższy problem z bootstrapem Github pokazuje doskonały przykład tego, czego oczekujesz. Jest to możliwe - ale nie bez napisania własnego kodu obejścia na tym etapie.

Sprawdź to... :-)

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

Używam href do załadowania modalu i zostawiam przełącznik danych dla podpowiedzi:

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

Ponieważ Bootstrap zmusza cię do inicjowania podpowiedzi tylko przez Javascript, zmieniłem data-toggle="tooltip"(ponieważ jest wtedy bezużyteczny) class="bootstrap-tooltip"i użyłem tego JavaScript do zainicjowania moich podpowiedzi:

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

Więc mogłem użyć data-toggleatrybutu do czegoś innego (np data-toggle="button".).

Tylko dla dopełnienia @Roman Holzner odpowiedz ...

W moim przypadku mam przycisk, który pokazuje podpowiedź i powinien pozostać wyłączony do czasu wykonania dalszych czynności. Używając jego podejścia, modal działa nawet jeśli przycisk jest wyłączony, ponieważ jego wywołanie jest poza przyciskiem - jestem w pliku ostrza Laravel, żeby było jasne :)

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

Więc jeśli chcesz wyświetlać modalne tylko wtedy, gdy przycisk jest aktywny, powinieneś zmienić kolejność tagów:

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

Jeśli chcesz to przetestować, zmień atrybut za pomocą kodu JQuery:

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

Jeszcze jedno rozwiązanie:

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

Jest fajne rozwiązanie wykorzystujące klasę .stretched-link. Przycisk musi mieć klasę .position-relative. Oto pełny przykład działania:

Podpowiedź musi zostać dodana do przycisku, w przeciwnym razie jego położenie będzie nieprawidłowe.

$('[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>

Kiedy otwierasz modal na tagu i chcesz pokazać podpowiedź, a jeśli zaimplementujesz podpowiedź wewnątrz tagu, wyświetli się podpowiedź w pobliżu tagu. lubię to

Zasugeruję użycie div poza tagiem i użycie "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>