TechBlogSD - Wszystko do WordPressa i tworzenia stron internetowych
Instrukcje WEB i WordPress, nowości, recenzje motywów i wtyczek

Jak tworzyć podpowiedzi do Bootstrapa 5?

3

Etykietki narzędzi to fragment tekstu znacznika, który pojawi się po najechaniu myszą na hiperłącze. W Bootstrap 5 są pewne rzeczy, o które powinieneś zadbać przed dodaniem podpowiedzi. Jeśli zauważyłeś, że szablon startowy zawiera nową bibliotekę JavaScript innej firmy o nazwie Popper. Jest to używane głównie w komponencie podpowiedzi do pozycjonowania.

Ten samouczek obejmuje następujące rozdziały:

  1. Podstawy podpowiedzi Bootstrap 5
  2. Inicjowanie podpowiedzi
  3. Korzystanie z podpowiedzi z tagiem kotwicy
  4. Pozycjonowanie podpowiedzi
  5. Używanie podpowiedzi z przyciskami
  6. Dodawanie treści HTML do podpowiedzi
  7. Opcje dostosowywania

1 Podstawy podpowiedzi z Bootstrapem

  • Tooltips jest komponentem JavaScript, dlatego powinieneś dołączyć pliki bootstrap.min.js do swojego szablonu HTML. Alternatywnie możesz również użyć połączonego pliku skryptu bootstrap.bundle.min.js.
  • Również w celu prawidłowego pozycjonowania podpowiedzi powinieneś dołączyć popper.min.js do całego kodu źródłowego.
  • Etykietki narzędzi nie będą domyślnie ładowane ze względu na wydajność ładowania strony. W związku z tym należy zainicjować element nadrzędny do załadowania na stronie.
  • Sekwencja plików skryptów powinna wyglądać następująco: popper.min.js, bootstrap.min.js, a następnie skrypt inicjujący.
  • W podpowiedziach nie są używane żadne obrazy, a koncepcja opiera się na podpowiedziach w stylu Facebooka utworzonych za pomocą wtyczki Tipsy jQuery.
  • Etykietka z zerową długością tytułu nie zostanie wyświetlona.
  • Bootstrap używa animacji CSS i atrybutów danych do kontrolowania zachowania podpowiedzi.

2 inicjowanie podpowiedzi w Bootstrap

W przeciwieństwie do innych komponentów Bootstrap, podpowiedzi należy zainicjować przed użyciem. Możesz dodać inicjalizację globalną, jak poniżej lub użyć inicjalizacji na poziomie konkretnego elementu, jeśli jest to wymagane.

$(function() { $('[data-toggle="tooltip"]').tooltip() })

Poniżej znajduje się kod aktywacji podpowiedzi na poziomie elementu kotwicy.

<script> $("a").tooltip(); </script>

Poniżej znajduje się kod do użycia przycisku do inicjalizacji:

<script> $("button").tooltip(); </script>

Pamiętaj, że ten kod skryptu powinien zostać dodany zaraz po linkach popper.min.js i bootstrap.min.js, aby podpowiedź działała zgodnie z oczekiwaniami. Format szablonu startowego można sprawdzić tutaj.

3 Korzystanie z podpowiedzi na etykiecie zakotwiczenia

Najpierw utwórzmy prostą podpowiedź za pomocą znacznika kotwicy. Kod powinien wyglądać jak poniżej:

<a href="#" data-toggle="tooltip" data-animation="false" title="This is a tooltip"> Content to Show </a>
  • Powinieneś użyć atrybutu data-toggle z wartością jako etykietką.
  • Etykietka pokaże wprowadzony tekst tytułu w wyskakującym okienku po najechaniu kursorem.
  • Treścią do wyświetlenia jest tekst kotwicy podobny do hiperłącza.

Wynik powinien wyglądać jak poniżej w przeglądarce po najechaniu myszą:

Jak tworzyć podpowiedzi do Bootstrapa 5?

4 podpowiedzi dotyczące pozycjonowania

Jak widać w powyższym przykładzie, domyślnie podpowiedź zostanie umieszczona na górze treści. Bootstrap umożliwia pozycjonowanie na górze, lewej, prawej i dolnej części tekstu zakotwiczenia za pomocą atrybutu data-placement.

  • Użyj data-placement="top" jako najwyższej pozycji. Jest to ustawienie domyślne, więc nie musisz wyraźnie o tym wspominać.
  • Użyj data-placement="bottom” dla dolnej pozycji.
  • Użyj data-placement=”right” dla właściwej pozycji.
  • Użyj data-placement=”left” dla lewej pozycji.

5 podpowiedzi na temat przycisków

Stwórzmy cztery podpowiedzi z różnymi pozycjami na komponencie przycisku.

<button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="Tooltip on top"> Tooltip on top </button> <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right"> Tooltip on right </button> <button type="button" class="btn btn-warning" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom"> Tooltip on bottom </button> <button type="button" class="btn btn-info" data-toggle="tooltip" data-placement="left" title="Tooltip on left"> Tooltip on left </button>

Wynik w przeglądarce powinien wyglądać jak poniżej:

Jak tworzyć podpowiedzi do Bootstrapa 5?

6 Korzystanie z treści HTML wewnątrz podpowiedzi

Domyślnie podpowiedź obsługuje tylko zawartość tekstową w środku. Możesz dodać tagi HTML za pomocą atrybutu data-html=”true”. Poniżej znajduje się przykład dodawania przekreślonej treści w podpowiedzi za pomocą znaczników HTML ~…~ .

<a href="#" data-toggle="tooltip" data-html="true" title="<s>This is a strikethrough tooltip</s>"> Content to Show </a>

Jak widać, zawartość wewnątrz tagu title jest przetwarzana za pomocą tagów HTML, gdy ustawiony jest atrybut data-html=”true”. Poniżej jak to będzie wyglądać w przeglądarce:

Jak tworzyć podpowiedzi do Bootstrapa 5?

7 opcji dostosowywania podpowiedzi

Możesz dalej dostosowywać podpowiedzi, używając atrybutów „data-“.

  • Wyłącz efekt zanikania CSS, dodając atrybut data-animation=”false”.
  • Opóźnij pokaż i ukryj z atrybutem data-delay.
  • Odsuń etykietę narzędzia od elementu za pomocą przesunięcia danych.

Więcej przykładów podpowiedzi można znaleźć w witrynie Popper JavaScript.

Uwaga: podpowiedzi Bootstrap 5 nie będą działać na IE8 lub niższych, ponieważ przeglądarka nie obsługuje poppera.


Dowiedz się o Bootstrapie 5 (Indeks )


Źródło nagrywania: webnots.com
Leave A Reply

Ta strona korzysta z plików cookie, aby poprawić Twoje wrażenia. Zakładamy, że nie masz nic przeciwko, ale możesz zrezygnować, jeśli chcesz. Akceptuję Więcej szczegółów