Kontrola Bootstrap z wieloma „przełączaniem danych”

154

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");
LastTribunal
źródło

Odpowiedzi:

330

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>
Roman Holzner
źródło
6
To właściwie najlepsze podejście, ponieważ przenosi problem prezentacji do warstwy prezentacji.
LastTribunal
3
Jest jednak pewna różnica: element data-toggle="tooltip"wewnątrz głównego (przycisku) będzie się ładnie wyświetlać na zewnątrz tego elementu, podczas gdy będzie nakładał się na ten element, jeśli zostanie ustawiony w opakowaniu span.
Benjamin
1
dzięki tak to należy zrobić - No javascript
tsadkan yitbarek
Krótkie, proste i inteligentne rozwiązanie. Dodanie Span do tagu Anchor nie zmienia projektu w bootstrapie, więc jest to idealne rozwiązanie do jednoczesnego uruchamiania modelu i podpowiedzi.
ankit suthar
to nie zadziałało dla mnie<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

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();
Melvin
źródło
10
Uproszczono to za pomocą: $ ('[data-tooltip = "tooltip"]'). Tooltip ();
Ryan Currah
3
Użyłem zaktualizowanej odpowiedzi i było bardzo łatwe, działało idealnie
The One and Only ChemistryBlob
1
najlepsze niż opakowanie fajnego rozwiązania
D3VELOPER
1
Problem z tym (i innymi rozwiązaniami w tym pytaniu w tej chwili) polega na tym, że kiedy klikniesz, aby otworzyć modal, a następnie go zamkniesz, podpowiedź pojawia się ponownie (lub pozostaje widoczna), mimo że mysz opuściła przycisk. Jest to bardzo denerwujące, jeśli np. Masz przyciski w tabeli w każdym wierszu, ponieważ mogą one blokować przycisk powyżej / poniżej. Jedynym sposobem na ukrycie tego jest kliknięcie gdzieś poza etykietką.
przytul
1
Uwielbiam to podejście o wiele bardziej niż zaakceptowaną odpowiedź z opakowaniem. Jest to bardzo proste, ponieważ rozszerza możliwości HTML5 bez nadmiernego przeciążania DOM. Również w moim przypadku podejście typu wrapper wydawało się nie działać
Canelo Digital
11

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();
James Parker
źródło
9

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(); 
Jacques Koekemoer
źródło
1
To najczystsza, najmniej natrętna odpowiedź
Smyrnian
8

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

obrientimothya
źródło
Niestety, ten numer (nr 7011) został odrzucony.
TJ Crowder
3

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>
Shadi Namrouti
źródło
3

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

ankabot
źródło
Wspaniały. Dodaj też HTML.
Web_Developer
2

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);
Thiago Cardoso
źródło
2

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>
Jackkobec
źródło
2

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>

Jakub Muda
źródło
1

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

wprowadź opis obrazu tutaj

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>

wprowadź opis obrazu tutaj

virender
źródło
0

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

Ananth
źródło