Bootstrap Tooltip: tworzenie podpowiedzi

Jak uczynić witrynę atrakcyjną dla odwiedzających? To pytanie dotyczy niemal wszystkich właścicieli zasobów internetowych: kupców, blogerów, właścicieli małych i dużych firm, podróżników i po prostu kreatywnych ludzi, którzy mają coś do powiedzenia światu.

Dlaczego strona powinna być piękna i funkcjonalna?

Liczba odwiedzin zależy od przedmiotu witryny i jej docelowych odbiorców, zainteresowania osób w danym produkcie, załączników, promocji, wypełniania i wielu innych czynników. Ale nie można zaprzeczyć, że strona "spotyka się na ubraniach". Jest to pierwsza i główna strona zasobu to jego twarz, wizytówka, w której odwiedzający musi zrozumieć, czy chce spędzać czas na dalszym oglądaniu treści.


I nie ma prawa się mylić! Według badań przeprowadzonych przez jedną z amerykańskich uczelni technicznych, pierwsze wrażenie na stronie jest odwiedzane w mniej niż sekundę. Przeciętnie osoba "indeksuje" witrynę w ciągu 3 sekund. Prędkość błyskawicy, prawda?! Od wyglądu strony głównej zależy to od sukcesu zasobu. Pierwszą rzeczą, na którą ludzie zwracają uwagę, jest logo, a druga to nawigacja. A jeśli logo jest mniej lub bardziej wyraźne, nawigacja, menu i ergonomia witryny to dobre miejsce na złamanie głowy. Pojawia się uzasadnione pytanie: "Jak ozdobić witrynę, uczynić ją tak funkcjonalną i komfortową, jak to tylko możliwe, ale jednocześnie piękną?" Istnieje wiele niecodziennych pomysłów, które mogą być oferowane, ale jednym z najciekawszych jestwyskakujące wskazówki.


Co to są wyskakujące okienka? Oprócz tego, że jest doskonałym narzędziem do poprawy funkcjonalności witryny, podpowiedzi narzędzi to narzędzie, które pozwala użytkownikowi na najechanie kursorem myszy nad ikoną, słowem lub obrazem, aby zobaczyć objaśnienie konkretnego obrazu.

Zestaw narzędzi dla podpowiedzi

Bootstrap najlepiej nadaje się do tworzenia wyskakujących monitu. Jest to łatwy do opanowania zestaw szablonów do tworzenia aplikacji i stron pisanych w HTML, CSS, Sass i javascript.
Jeśli jest określony, to jeden z elementów graficznych szablonu Bootstrap - Etykietka narzędzi jest używany do podpowiedzi. Struktura Bootstrap została stworzona dla "Twittera" i początkowo nosiła nazwę "Twitter blu-Print". Po pewnych zmianach w 2012 roku otrzymał tabelę w 12 kolumnach, stał się adaptacyjny i uzyskał zwykłą nazwę - Etykietka. Typ to element, który pojawia się po najechaniu kursorem na określony element na ekranie monitora.

Utwórz etykietę narzędziową

Możesz utworzyć narzędzie Bootstrap Tooltip, używając atrybutów danych, a także aktywując elementy skryptu JavaScript. Istnieją dwa główne sposoby tworzenia etykiety narzędzi HTML Bootstrap Tooltip. Istotą pierwszego jest zastosowanie atrybutu data-toggle = "tooltip" i tytułu atrybutu (title), który będzie zawierał tekst etykiety narzędzia. Etykieta pojawi się u góry (ustawienie domyślne). Warto pamiętać, że monit musi zostać zainicjowany, ponieważ automatyczna inicjalizacja jest anulowana w bootstrapie na Twitterze ze względu na zwiększoną produktywność.
AbyInicjowanie podpowiedzi powoduje użycie specjalnego javascriptu, który przywraca styl narzędzia wszystkim elementom, które mają atrybut danych-toggle = "tooltip". Istotą drugiej metody jest aktywacja za pomocą skryptów JavaScript z biblioteką jQuery przez napisanie klasy narzędzia zawierającej etykietę narzędzia. Metoda jest podobna do pierwszej, z wyjątkiem metody wyboru elementów. Możesz włączyć sugestie dotyczące Javascript w sposób pokazany poniżej.

Przykład etykiety programu startowego

Istnieją cztery główne opcje umieszczania podpowiedzi: na lewej i prawej krawędzi, a także na górze i na dole elementu.
Góra wskazówka
Wskazówka po prawej stronie
Podpowiedź poniżej
Wskazówka po lewej stronie

Stosowanie podpowiedzi

Istnieje wiele aplikacji etykiety narzędziowej Bootstrap. Możesz wkleić podpowiedzi, aby użytkownik mógł zrozumieć tłumaczenie tekstu z języka obcego na tekst. Możesz także użyć etykiet narzędzi jako narzędzia, aby pomóc użytkownikowi zrozumieć wartości przycisków po najechaniu na nie kursorem. Szablony Bootstrap Tooltip są często używane na stronach w różnych organizacjach do tworzenia subskrypcji wiadomości. Pozwala to na bieżąco informować klientów o sprawach, a także zapewnia odwiedzającym możliwość otrzymywania nowych informacji, takich jak wielkość rabatów, ofert, zmian w firmie.
Rozważ przykład, kiedy użytkownik musi wpisać swój adres e-mail, aby zasubskrybować dystrybucję. ZadanieZapewnienie subskrypcji klienta newsów jest najłatwiejsze dzięki użyciu HTML5 i wymaganego atrybutu. W tym przypadku styl podpowiedzi jest wymagany, aby użytkownik mógł zrozumieć kolejność czynności. Na przykład, po wprowadzeniu adresu e-mail, zaznacz pole wyboru w polu: "Zgadzam się na otrzymywanie wiadomości firmowych e-mailem". Poniżej znajduje się przykład kodu formularza.
Napisanie takiego kodu w HTML Bootstrap Tooltip nie będzie specjalnym zadaniem. Ale korzyści z tego są znaczące. Teraz konsumenci znają wszystkie wiadomości o firmie. To rodzaj bezpłatnej reklamy.

Poważne błędy podczas tworzenia wyskakujących porad

Co zrobić, jeśli Bootstrap Tooltip nie działa? Pierwszy i główny błąd, w którym atrybut stylu nie działa - to narzędzie nie jest uwzględnione. Aby go aktywować, musisz użyć specjalnego kodu.
Metoda ta pozwala na inicjalizacji wskazówek każdy tultyp na stronie internetowej. Drugi często popełniany błąd to brak nagłówka jQuery.
Wniosek właściwa praca jest niezbędnym warunkiem - muszą być dane fabularnych takich jak „Java Script”.

Właściwości Tooltip

W istocie składnik Tooltip zaprojektowany do wyświetlania wskazówek po najechaniu myszą w dowolnej części strony. Ale oprócz położenia wskazówek w prawo, w lewo i top-przełączanie przy użyciu danych = „tooltip” etykietka ma następujące właściwości:
  • Aktywny. Korzystanie z właściwości prawdziwej Bootstrap Tooltip pozwala na wyświetlanie monitów, z kolei, jest fałszywadla tej samej własności oznacza zakaz wyświetlania monitu.
  • AutoPopDelay to czas, w którym wyświetlane są karty.
  • ​​
  • AutoPopDelay. Jest to czas, w którym kursor myszy powinien zostać umieszczony na elemencie, aby pojawił się monit.
  • IsBalone. Jeśli etykieta narzędzia HTML Bootstrap Tooltip ma wartość true, okno podpowiedzi będzie wyglądać jak chmura.
  • ToolTipIcon. Jest to symbol, który pojawia się w etykiecie narzędzia.
  • Tooltipster

    Aby tworzyć świetne etykiety narzędzi, na przykład strona stworzona w Wordpress niekoniecznie doskonale zna język twórców stron internetowych. Wystarczy wiedzieć o istnieniu takiej wtyczki (rozszerzenia) jako Tooltipster. Z tytułu jasno wynika, że ​​ta wtyczka opiera się na podpowiedzi, a jej właściwości i cel są zaskakująco podobne. Dlaczego potrzebuję tej wtyczki? Umożliwia tworzenie niezbędnych znaczników HTML wewnątrz etykiety narzędzi.
    Praca wtyczki opiera się na wstawianiu szortów na stronę. Zawiera wszystkie główne atrybuty HTML Bootstrap Tooltip: zawartość (data-tooltip-content), tytuł, pozycja, wyzwalacz, itp. Pozwala to na zmianę motywu, czcionki, wielkości podpowiedzi, koloru, osadzonego obrazu i wiele więcej.

    Powiązane publikacje