Najnowsze tutoriale tworzenie stron internetowych
 

Bootstrap JS Tooltip

❮ Poprzednie Następne referencyjny ❯

JS Tooltip (tooltip.js)

Wtyczka Etykietka jest małe okienko pop-up, który pojawia się, gdy użytkownik przesuwa wskaźnik myszy nad elementem.

Samouczek o etykietek, przeczytaj naszą Bootstrap Tooltip Tutorial .

Via data-* Atrybuty

data-toggle="tooltip" aktywuje podpowiedź.

title atrybut określa tekst, który powinien być wyświetlany wewnątrz podpowiedzi.

Przykład

<a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a>
Spróbuj sam "

za pośrednictwem JavaScript

Podpowiedzi CSS nie są tylko wtyczki, a zatem musi być inicjowane z jQuery: wybierz określony element i wywołać tooltip() metody.

Przykład

// Select all elements with data-toggle="tooltips" in the document
$('[data-toggle="tooltip"]').tooltip();

// Select a specified element
$('#myTooltip').tooltip();
Spróbuj sam "

Tooltip Opcje

Opcje mogą być przekazywane za pomocą atrybutów danych lub JavaScript. Dla atrybutów danych, nazwy opcji dołączania do data- , jak w data-placement="" .

Nazwa Rodzaj Zaniedbanie Opis Spróbuj
animationbooleantrue

Określa, czy dodać efekt przejścia CSS na blaknięcie podczas pokazywania i ukrywania podpowiedzi

  • true - Dodaj efekt blaknięcia
  • false - Nie należy dodać efekt blaknięcia
Spróbuj
pojemnik ciąg lub wartość logiczną false fałszywy Dołącza podpowiedź do określonego elementu.
Przykład: pojemnik: 'body' 		Spróbuj
delaynumber, or object0 Określa liczbę milisekund, które podejmie, aby pokazać i ukryć podpowiedź.

Aby określić opóźnienie pokazując i inny dla ukrycia, użyć struktury obiektu:

delay: {show: 500, hide: 100} - która zajmie 500 ms, aby pokazać tooltip , ale tylko 100 ms to ukryć 		Spróbuj
htmlboolean false Określa, czy przyjąć tagów HTML w dymku:
  • true - Zebrane tagów HTML
  • false - Nie akceptuj znaczniki HTML
Uwaga: HTML musi być włożona w atrybucie tytuł (lub korzystając z opcji w tytule).

Gdy ustawiona na false (domyślnie), jQuery's text() zostanie użyta metoda. Użyj tej opcji, jeśli są zaniepokojeni atakami XSS 		Spróbuj
placementstring"top" Określa pozycję podpowiedzi. Możliwe wartości:

  • "top" - Etykietka na szczycie
  • "bottom" - Etykieta na spodzie
  • "left" - Tooltip po lewej stronie
  • "right" - Etykietka z prawej
  • "auto" - Pozwala przeglądarka zdecyduje pozycję podpowiedzi. Na przykład, jeśli wartość jest "auto left" , tooltip pojawi się po lewej stronie, jeśli to możliwe, w przeciwnym razie po prawej stronie. Jeżeli wartość jest "auto bottom" , tooltip pokaże się na dole, gdy jest to możliwe, w przeciwnym razie na szczycie
Spróbuj
selectorstring, or the boolean falsefalse Dodaje podpowiedź do określonego selektora Spróbuj
templatestring  HTML baza do wykorzystania przy tworzeniu podpowiedź.

Tytuł podpowiedzi zostanie włożona do elementu mającego klasa .tooltip-inner i element z klasą .tooltip-arrow staną strzałka podpowiedzi za.

Najbardziej zewnętrzna elementu otoki powinny mieć .tooltip klasę.
titlestring"" Określa tekst, który powinien być wyświetlany wewnątrz podpowiedzi Spróbuj
triggerstring"hover focus" Określa sposób etykietka jest wyzwalany. Możliwe wartości:

  • "click" - wywołanie podpowiedź jednym kliknięciem
  • "hover" - wywołanie podpowiedź przy aktywowaniu
  • "focus" - wywołanie podpowiedź, gdy robi się ostrość (przez tabulatorem lub kliknięcie .eg)
  • "manual" - wywołanie podpowiedź ręcznie
Wskazówka: Aby przekazać wiele wartości, oddziel je spacjami 		Spróbuj
viewportstring, or object{selector: "body", padding: 0} Utrzymuje podpowiedź w granicach tego elementu.

Przykład: viewport: '#viewport' lub {selector: '#viewport', padding: 0}

Metody Tooltip

Poniższa tabela zawiera listę wszystkich dostępnych metod podpowiedzi.

metoda Opis Spróbuj
.tooltip( options ) Aktywuje podpowiedź z opcja. Patrz wyżej opcje dla prawidłowych wartości Spróbuj
.tooltip("show") Pokazuje podpowiedź Spróbuj
.tooltip("hide") Ukrywa podpowiedź Spróbuj
.tooltip("toggle") Włącza podpowiedź Spróbuj
.tooltip("destroy") Ukrywa i niszczy podpowiedź Spróbuj

Tooltip Wydarzenia

Poniższa tabela zawiera listę wszystkich dostępnych wydarzeń podpowiedzi.

Zdarzenie Opis Spróbuj
show.bs.tooltip Występuje, gdy etykietka ma być pokazany Spróbuj
shown.bs.tooltip Występuje, gdy etykietka jest w pełni pokazane (po zakończeniu przejścia CSS) Spróbuj
hide.bs.tooltip Występuje, gdy etykietka ma być ukryta Spróbuj
hidden.bs.tooltip Występuje, gdy etykietka jest całkowicie ukryty (po zakończeniu przejścia CSS) Spróbuj
Przykłady

Przykłady

Niestandardowy Projekt Etykietka

Za pomocą CSS, aby dostosować wygląd podpowiedzi:

Przykład

/* Tooltip */
.test + .tooltip > .tooltip-inner {
    background-color: #73AD21;
    color: #FFFFFF;
    border: 1px solid green;
    padding: 15px;
    font-size: 20px;
}

/* Tooltip on top */
.test + .tooltip.top > .tooltip-arrow {
    border-top: 5px solid green;
}

/* Tooltip on bottom */
.test + .tooltip.bottom > .tooltip-arrow {
    border-bottom: 5px solid blue;
}

/* Tooltip on left */
.test + .tooltip.left > .tooltip-arrow {
    border-left: 5px solid red;
}

/* Tooltip on right */
.test + .tooltip.right > .tooltip-arrow {
    border-right: 5px solid black;
}
Spróbuj sam "

❮ Poprzednie Następne referencyjny ❯