Etykiety bootstrap nie działają

260

Szaleję tutaj.

Mam następujący kod HTML:

<a href="#" rel="tooltip" title="A nice tooltip">test</a>

Podpowiedź w stylu Bootstrap odmawia wyświetlenia, jest to zwykła podpowiedź.

Bootstrap.css działa dobrze i widzę tam klasy

Mam wszystkie odpowiednie pliki JS na końcu mojego pliku HTML:

<script src="bootstrap/js/jquery.js"></script>
<script src="bootstrap/js/bootstrap-alert.js"></script>
<script src="bootstrap/js/bootstrap-modal.js"></script>
<script src="bootstrap/js/bootstrap-transition.js"></script>
<script src="bootstrap/js/bootstrap-tooltip.js"></script>

Patrzyłem na źródło przykładu Bootstrap i nigdzie nie widzę niczego, co inicjowałoby podpowiedź. Więc zgaduję, że to powinno po prostu działać, czy brakuje mi tutaj czegoś istotnego?

Mam modały, alerty i inne rzeczy, które działają dobrze, więc nie jestem totalnym kretynem;)

Dzięki za wszelką pomoc!

twitter-bootstrap 
— Mike Bartlett
źródło
2
Podpowiedź jest inicjowana w pliku application.js w przykładzie na Twitterze. Czy możesz opublikować swój HTML? Chciałbym rzucić okiem na sposób inicjowania skryptu.
— Andres Ilich,
2
Ahhhhh .... Zignorowałem to, biorąc pod uwagę pierwszy komentarz. Więc to powinno działać: code<a href="#" rel="tooltip" title="A nice tooltip" class="tooltip-test"> test </a> <br> <script> // tooltip demo $ (' .tooltip-test '). tooltip () </script>
— Mike Bartlett
1
nie zapomnij przekazać selektora do opcji podpowiedzi,$('.tooltip-test').tooltip({ selector: "a" })
— Andres Ilich,
Dzięki, Andres. Wydaje mi się, że nie potrzebowałem tam selektora, chyba dlatego, że klasa a jest określana jako test podpowiedzi.
— Mike Bartlett,
3
Bez opcji selektora podpowiedź nie działa dla mnie, oto demo, które przygotowałem: jsfiddle.net/VXctp , spróbuj bez selektora.
— Andres Ilich,

Odpowiedzi:

276

Podsumowując: aktywuj podpowiedzi za pomocą selektorów jQuery

<script type="text/javascript">
    $(function () {
        $("[rel='tooltip']").tooltip();
    });
</script>

W rzeczywistości nie musisz używać selektora atrybutów, możesz wywołać go na dowolnym elemencie, nawet jeśli nie ma go rel="tooltip"w znaczniku.

— Manuel Ebert
źródło
13
Dla osób pracujących z Rails, to jest już zdefiniowana w bootstrap.js.coffeez $(".tooltip").tooltip(). Pamiętaj tylko, aby dołączyć //= require bootstrapdo swojego application.js.
— slhck,
6
Dodanie klasy .tooltip do dowolnego elementu złamie dla mnie podpowiedzi. Treść wewnątrz elementu z klasą .tooltip zostanie ukryta, a podpowiedź wyświetli się, jeśli uda mi się znaleźć ukryty element za pomocą myszy. Użycie dowolnego innego selektora lub nazwy klasy będzie działać dobrze. \
— Leonel Galán
4
@Leito, które jest poprawne, bootstrap definiuje style .tooltipi domyślnie są niewidoczne. Możesz jednak użyć relatrybutu lub dowolnej innej klasy jako selektora.
— Manuel Ebert
3
Tak, potrzebujesz ZARÓWNO HTML Markup i JS Selector. Nie są to alternatywne sposoby stosowania podpowiedzi.
— ATSiem
1
Niektórzy mogą próbować wyświetlić etykietkę w trybie modalnym, co nie działa we wszystkich wersjach bootstrap. Jeśli wypróbujesz to na zwykłej stronie, a nie modalnej, i to działa, wiesz, że to jest problem.
— mjnissim,
212

Po napotkaniu tego samego problemu stwierdziłem, że to rozwiązanie działa bez konieczności dodawania dodatkowych atrybutów tagów poza atrybutami wymaganymi Bootstrap.

HTML

<a href="#" data-toggle="tooltip" title="Title Here">Hyperlink Text</a>

JQuery

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

Mam nadzieję że to pomoże!

— Marcus Hoelscher
źródło
20
Dzięki! To zadziałało dla mnie. Jakoś inne rozwiązania na tej stronie nie działały dla mnie.
— Roman
1
Jestem z Romanem. To rozwiązanie działa również z wariantami CSS Bootswatch.
— DaveCS
To zadziałało dla mnie. Nic innego nie uruchomiło tego, dopóki tego nie spróbowałem. Dzięki!
— BlakePetersen
1
To też działało dla mnie. Każdy pomysł, dlaczego $ ('[data-toggle = "tooltip"]'). Tooltip ({'placement': 'top'}); nie działa?
— ZeroCool,
Dzięki, to zadziałało dla mnie. Upewnij się tylko, że wstawiasz kod między znaczniki <script> PO załadowaniu biblioteki JQuery.
— GeraldScott,
31

Nie potrzebujesz wszystkich plików js oddzielnie

Wystarczy użyć następujących plików, jeśli zamierzasz korzystać ze wszystkich funkcji ładowania początkowego:

-bootstrap.css
-bootstrap.js

oba z nich można znaleźć na stronie http://twitter.github.com
i na końcu -
najnowsza wersja pliku jquery.js

W przypadku Glifikonów potrzebujesz obrazu

glyphicons-halfings.png i / lub glyphicons-halfings-white.png (białe obrazy),
które musisz załadować do folderu / img / swojej witryny (lub) przechowuj w dowolnym miejscu, ale zmień katalog folderów wewnątrz paska ładującego .css

Do podpowiedzi potrzebny jest następujący skrypt wewnątrz <head> </head>tagu

  <script type='text/javascript'>
     $(document).ready(function () {
     if ($("[rel=tooltip]").length) {
     $("[rel=tooltip]").tooltip();
     }
   });
  </script>

Otóż ​​to...

— Harish Kumar
źródło
27

http://getbootstrap.com/javascript/#tooltips-usage

Funkcjonalność Opt-in Ze względu na wydajność, Tooltip i Popover data-api są opcjonalne

musisz je samodzielnie zainicjować.

Jednym ze sposobów inicjalizacji wszystkich podpowiedzi na stronie byłoby wybranie ich za pomocą atrybutu przełączania danych:

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

umieszczenie tego fragmentu kodu w html pozwala na użycie podpowiedzi

Przykłady:

<!-- button -->
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>

<!-- a tag -->
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>
— Max O.
źródło
2
Dziękujemy za udostępnienie tej koncepcji opt-in! Nigdy nie czytaj tego z żadnych samouczków.
— dpp
Rozwiązanie wszystkich moich podpowiedzi jquery / bootstrap whoas
— DJ Burb
Brak podanego
— Guillaume Husta,
20

Wiem, że to stare pytanie, ale ponieważ miałem ten problem z nową wersją bootstrap i nie jest jasne na stronie, oto jak włączyć podpowiedź.

nadaj elementowi klasę typu „test podpowiedzi”

następnie aktywuj tę klasę w swoim tagu javascript:

<script type="text/javascript">
    $('.tooltip-test').tooltip();
</script>

<a href="#" class="tooltip-test" title="" data-original-title="Tooltip">This link</a>
— Amir Soleymani
źródło
To było jedyne rozwiązanie, które działało dla mnie. Używam data-original-title = "{{someAngularJSVar}}", aby zaktualizować tytuł i działa on bezbłędnie.
— WKara,
19

HTML

<a href="#" data-toggle="tooltip" title="Title Here">Hyperlink Text</a>

JQuery

$(document).ready(function() {
    $('[data-toggle=tooltip]').tooltip();
});

Ten jest dla mnie pracą.

— Igor Shvydok
źródło
1
Ta propozycja również działała idealnie dla mnie. Podobało mi się, ponieważ jest prosty i elegancki. Pozwala nadal używać standardów Bootstrap, tak jakby wtyczka została domyślnie zainicjowana, podobnie jak dzieje się to w przypadku elementów rozwijanych i kart. Dodałem JS zaproponowany przez @Igor do nowego pliku i spakowałem go do oryginalnego bootstrap.js
— Iago Rodríguez-Quintana
14

Jeśli zrobisz to, $("[rel='tooltip']").tooltip();co sugerują inne odpowiedzi, aktywujesz podpowiedzi tylko dla elementów, które są obecnie w DOM. Oznacza to, że jeśli zamierzasz zmienić DOM i wstawić zawartość dynamiczną później, to nie zadziała. Jest to również znacznie mniej wydajne, ponieważ instaluje obsługę zdarzeń dla poszczególnych elementów, w przeciwieństwie do delegowania zdarzeń JQuery. Tak więc najlepszym sposobem na aktywację podpowiedzi Bootstrap jest jeden wiersz kodu, który możesz umieścić w dokumencie gotowy i zapomnieć o tym:

$(document.body).tooltip({ selector: "[title]" });

Zauważ, że używam titlejako selektora zamiast rel=titlelub data-title. Ma to tę zaletę, że może być stosowany do wielu innych elementów (the reljest niby być tylko dla kotew), a także działa jako „awaryjnej” dla starych przeglądarek.

Pamiętaj również, że nie potrzebujesz data-toggle="tooltip"atrybutu, jeśli używasz powyższego kodu.

Podpowiedzi Bootstrap są drogie, ponieważ musisz obsługiwać zdarzenia myszy na każdym elemencie. To jest powód, dla którego domyślnie go nie włączają. Więc jeśli kiedykolwiek zdecydujesz się skomentować powyżej linii, strona nadal będzie działać, jeśli użyjesz atrybutu title.

Jeśli nie chcesz używać atrybutu title, zaleciłbym użycie czystego rozwiązania CSS, takiego jak Hint.css, lub sprawdzenie http://csstooltip.com, który w ogóle nie wymaga kodu JavaScript.

— Shital Shah
źródło
Walczę z tym, ponieważ generowanie dynamiczne ma kilka poziomów głębokości. Wartość href jest treścią generowaną dynamicznie, a wynikowy identyfikator div jest oparty na numerze elementu pasującym do wartości href. Więc jeśli mam stronę z linkami typu A, to mam listę pozycji a-1, pozycji a-2, pozycji a-3, każdy z tych linków prowadzi do poszczególnych stron, ale chcę treść podpowiedzi, aby wyświetlać zawartość dynamiczną po najechaniu myszą, aby użytkownik mógł dowiedzieć się czegoś o elemencie przed kliknięciem pełnego linku.
— Melanie Sumner
To było najbardziej pomocne. Miałem zestaw podpowiedzi do wiązania z ikoną, a biblioteka ikon miała pewne asynchroniczne ładowanie, więc nie mogła się powiązać. To było takie dziwne, ponieważ działałoby, gdy używałeś selektora klasy, ale nie ID. Dziękuję za pomoc!
— Nick Woodhams,
14

To jest najprostszy sposób. Po prostu umieść to wcześniej </body>:

<script type="text/javascript">
    $("[data-toggle=\"tooltip\"]").tooltip();
</script>

Sprawdź przykłady podane w dokumentacji Bootstrap na temat podpowiedzi .

Na przykład: 

<a href="#"
   data-toggle="tooltip"
   data-placement="bottom"
   title="Tooltip text here">Link with tooltip</a>
— Marcos Cassiano
źródło
2
proszę zamknąć atrybut typu ... edycja pojedynczej literówki to PITA: S
— Mohd Abdul Mujib
10

Etykietka i popover NIE są wtyczkami tylko css, takimi jak rozwijane lub pasek postępu. Aby korzystać z podpowiedzi i popovera, MUSISZ je aktywować za pomocą jquery (czytaj javascript).

Powiedzmy, że chcemy, aby po kliknięciu przycisku HTML pojawił się popover.

<a href="#" role="button" 
     class="btn popovers-to-be-activated" 
     title="" data-content="And here's some amazing content." 
     data-original-title="A Title" "
>button</a>

Następnie musisz mieć następujący kod javascript, aby aktywować popover:

$('.popovers-to-be-activated').popover();

W rzeczywistości powyższy kod javascript aktywuje popover we wszystkich elementach HTML, które mają klasę „popovers-to-be-Activated”.

Nie trzeba dodawać, włóż powyższy javascript do wywołania zwrotnego gotowego do DOM, aby aktywować wszystkie popovery, gdy tylko DOM będzie gotowy:

$(function() {
 // Handler for .ready() called.
 $('.popovers-to-be-activated').popover();
});
— Mayank Jaiswal
źródło
5

w sekcji nagłówka musisz najpierw dodać następujący kod

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

<script>
$(document).ready(function(){
   $('[data-toggle="tooltip"]').tooltip();   
});
</script>

Następnie w sekcji body musisz napisać następujący kod

<p>The data-placement attribute specifies the tooltip position.</p>
<ul class="list-inline">
<li><a href="#" data-toggle="tooltip" data-placement="top" title="Hooray!">Top</a></li>
<li><a href="#" data-toggle="tooltip" data-placement="bottom" title="Hooray!">Bottom</a></li>
<li><a href="#" data-toggle="tooltip" data-placement="left" title="Hooray!">Left</a></li>
<li><a href="#" data-toggle="tooltip" data-placement="right" title="Hooray!">Right</a></li>

— Rush.2707
źródło
4

Jeśli wszystko nadal nie zostało rozwiązane Użyj najnowszej biblioteki Jquery, nie potrzebujesz żadnego selektora jquery, jeśli używasz najnowszego bootstrap 2.0.4 i jquery-1.7.2.js

Po prostu użyj rel="tooltip" title="Your Title" data-placement=" "

Użyj górnego / dolnego / lewego / prawego miejsca do umieszczania danych zgodnie z życzeniem.

— Harish Kumar
źródło
3

Dodałem jquery i bootstrap-tooltip.js w nagłówku. Dodanie tego kodu w stopce działa dla mnie! ale kiedy dodam ten sam kod w nagłówku, to nie działa! 

<script type="text/javascript">
$('.some-class').tooltip({ selector: "a" });
</script>
— Karthik
źródło
3
W tym przypadku DOM nie został jeszcze załadowany, więc wszystkie elementy mogą nie istnieć na stronie. Zawiń powyższy kod w$(function() { ... });
— johnml
3

Jeśli użycie Rails + Haml jest o wiele łatwiejsze do włączenia podpowiedzi, po prostu wykonaj:

= link_to '', some_path(), :class => "btn btn-success btn-mini icon-plane", :rel => "tooltip", :title => "Referential Guide"

To po prostu dodaj następujący wiersz na końcu elementu.

:rel => "tooltip", :title => "Referential Guide"
— Andres Calle
źródło
Naprawdę miałem nadzieję, że to zadziała dla mnie, ale niestety nie.
— turboladen
Teraz bardziej interesuję się Djanto niż Railsami, ale jeśli wkleisz kod, mógłbym spróbować dać ci wskazówkę.
— Andres Calle,
3

W moim szczególnym przypadku nie zadziałało, ponieważ dołączyłem dwie wersje jQuery. Jeden do bootstrapu, ale drugi (inna wersja) do wykresów Google.

Kiedy usuwam ładowanie jQuery dla wykresów, działa dobrze.

— Dieter
źródło
3

Właśnie dodałem:

<script src="http://getbootstrap.com/assets/js/docs.min.js"></script>

poniżej bootstrap.min.js i działa.

— Andy.sin
źródło
3

Użyjmy przykładu, aby pokazać, jak można dodawać Podpowiedzi do dowolnego elementu HTML w dokumencie.

UWAGA:

Jeśli te próbki etykiet nie działają po umieszczeniu ich na stronie, oznacza to, że masz inny problem. Musisz spojrzeć na takie rzeczy jak:

  • Kolejność włączania skryptów
  • Sprawdź, czy próbujesz zainicjować usunięte elementy HTML
  • Sprawdź, czy próbujesz wywoływać metody w plikach JS, których już nie włączasz

  • Sprawdź, czy dołączasz plik JS, który zapewnia potrzebną funkcjonalność (nie tylko podpowiedzi, ale także wszelkie komponenty używane na stronie).

    <head>
    <link rel="stylesheet" href="/Content/bootstrap.css" />
    <link rel="stylesheet" href="/Content/animate.css" />
    <link rel="stylesheet" href="/Content/style.css" />
</head>
<body>
    ... your HTML code ...
    <script src="/Scripts/jquery-2.1.1.js"></script>
    <script src="/Scripts/bootstrap.min.js"></script>
    <script src="/Scripts/app/inspinia.js"></script> <!-- if using INSPINIA -->
    ... your JavaScript initializers ...
</body>

Niepowodzenie ŻADNEGO z powyższych elementów może (i często uniemożliwia) ładowanie i / lub uruchamianie javascript, a to sprawia, że ​​wszystko jest ładne i zepsute.

PRZYKŁADY PRACY

Załóżmy, że masz odznakę i chcesz, aby wyświetlała etykietkę, gdy użytkownik najedzie na nią wskaźnikiem.

Oryginalny HTML:

<span class="badge badge-sm badge-plain">Admin Mode</span>

Zwykłe podpowiedzi Bootstrap

Jeśli tworzysz podpowiedzi dla elementu HTML i używasz podpowiedzi Plain Bootstrap, wtedy będziesz odpowiedzialny za wywoływanie Inicjatorów podpowiedzi z własnym kodem JavaScript.

PRZED

<span class="badge badge-sm badge-plain">Admin Mode</span>

PO

<span 
    class="badge badge-sm badge-plain" 
    data-toggle="tooltip" 
    data-placement="right" 
    title="Tooltip on right" 
 >Admin Mode</span>

INICJALIZATOR

<script>
    // Initialize any Tooltip on this page
    $(document).ready(function () 
        {
            $('[data-toggle="tooltip"]').tooltip();
        }
    );
</script>

Etykietki szablonów Bootstrap (takie jak INSPINIA)

Jeśli używasz szablonu ładowania początkowego (takiego jak INSPINIA), dołączasz skrypt pomocniczy do obsługi funkcji szablonu:

    <script src="/Scripts/app/inspinia.js" />

W przypadku INSPINIA dołączony skrypt automatycznie inicjuje wszystkie podpowiedzi, uruchamiając następujący kod javascript po zakończeniu ładowania dokumentu:

// Tooltips demo
$('.tooltip-demo').tooltip({
    selector: "[data-toggle=tooltip]",
    container: "body"
});

Z tego powodu NIE musisz samodzielnie inicjować etykietek narzędzi w stylu INSPINIA. Ale musisz sformatować swoje elementy w określony sposób. Wygląda initializer dla elementów HTML z tooltip-demow classatrybucie, a następnie wywołuje tooltip()metodę zainicjować jakieś podrzędne elementy, które mają atrybutdata-toggle="tooltip" zdefiniowany.

W naszym przykładzie znaczek umieścić element zewnętrzny wokół niego (jak <div>lub <span>), który posiada class="tooltip-demo"i umieścić data-toggle, data-placementititle atrybuty rzeczywistej podpowiedzi wewnątrz element, który jest blaszka. Zmodyfikuj oryginalny kod HTML z góry, aby wyglądał mniej więcej tak:

PRZED

<span class="badge badge-sm badge-plain">Admin Mode</span>

PO

<span class="tooltip-demo">
    <span 
        class="badge badge-sm badge-plain" 
        data-toggle="tooltip" 
        data-placement="right" 
        title="Tooltip on right" 
     >Admin Mode</span>
</span>

INICJALIZATOR

None

Zauważ, że wszelkie elementy potomne w <span class="tooltip-demo"> elemencie będą odpowiednio przygotowane podpowiedzi. Mógłbym mieć trzy elementy potomne, wszystkie wymagające podpowiedzi, i umieścić je w jednym pojemniku.

Wiele przedmiotów, każdy z etykietką

<span class="tooltip-demo">
    <span class="badge badge-sm badge-plain" data-toggle="tooltip" data-placement="right" title="A Tooltip">Text 001</span>
    <span class="badge badge-sm badge-plain" data-toggle="tooltip" data-placement="right" title="Another Tooltip">Text 002</span>
    <span class="badge badge-sm badge-plain" data-toggle="tooltip" data-placement="right" title="Third Tooltip">Text 003</span>
</span>

Najlepiej użyć do tego byłoby dodać class="tooltip-demo"do <td>lub najbardziej zewnętrzną <div>lub <span>.

Zwykłe podpowiedzi Bootstrap podczas korzystania z szablonu

Jeśli używasz INSPINIA, ale nie chcesz dodawać dodatkowych etykiet zewnętrznych <div>ani <span>znaczników do tworzenia podpowiedzi, możesz używać standardowych podpowiedzi Bootstrap bez ingerowania w szablon. W takim przypadku będziesz odpowiedzialny za samodzielne zainicjowanie etykietek narzędzi. Należy jednak użyć niestandardowej wartości w classatrybucie, aby zidentyfikować elementy etykietki narzędzia. Zapobiegnie to zakłócaniu przez inicjator etykietki narzędzi elementów, na które wpływa INSPINIA. W naszym przykładzie użyjmy standalone-tt:

PRZED

<span class="badge badge-sm badge-plain">Admin Mode</span>

PO

<span 
    class="standalone-tt badge badge-sm badge-plain" 
    data-toggle="tooltip" 
    data-placement="right" 
    title="Tooltip on right" 
 >Admin Mode</span>

INICJALIZATOR

<script>
    // Initialize MY standalone tooltips, ignoring INSPINIA-affected elements
    $(document).ready(function () 
        {
            $('.standalone-tt').tooltip();
        }
    );
</script>
— Mike Stillion
źródło
2

Jeśli tworzysz swój html zawierający etykietkę z javascript, a następnie wstawiasz ją do dokumentu, musisz aktywować popover / etykietkę PO włożeniu html do dokumentu, a nie przy ładowaniu dokumentu ...

— chri_chri
źródło
2

Musisz umieścić javascript podpowiedzi po html. lubię to :

<a href="#" rel="tooltip" title="Title Here"> I am Here</a>

<script>
$("* [rel='tooltip']").tooltip({
   html: true, 
   placement: 'bottom'
});

</script>

Lub użyj $ (dokument) .ready: 

$(document).ready(function() {

$("* [rel='tooltip']").tooltip({
   html: true, 
   placement: 'bottom'
});

});

</script>

Etykietka nie działa, ponieważ umieścisz html etykietkę przed javascript , więc nie wiedzą, czy jest javascript dla etykietki. Moim zdaniem skrypt jest czytany od góry do dołu.

— Powiększenie
źródło
2

Miałem podobny problem, a zwłaszcza jeśli biegniesz w pojemniku z guzikami, takim jak pionowy pojemnik z guzikami. W takim przypadku musisz ustawić kontener jako „ciało”

I have added a jsfiddle example

przykład

— Shawn Vader
źródło
1

Z dokumentów bootstrap na etykietach narzędzi

Podpowiedzi są opcjonalne ze względu na wydajność, więc musisz je samodzielnie zainicjować. Jednym ze sposobów inicjalizacji wszystkich podpowiedzi na stronie byłoby wybranie ich za pomocą atrybutu przełączania danych:

  $('[data-toggle="tooltip"]').tooltip()
— Rahil Ahmad
źródło
0

Musisz wykonać następujące czynności. Dodaj

<script type="text/javascript">
    $(function () {
        $("[rel='tooltip']").tooltip();
    });
</script>

kod gdzieś na twojej stronie (najlepiej w <head>sekcji).

Dodaj także data-toggle: "tooltip"wszystko, co chcesz włączyć.

— Calum Childs
źródło
0

możesz użyć Popper.js

<script src="JavaScript/popper.min.js"></script>
<script src="JavaScript/bootstrap.min.js"></script>

I wywołaj funkcję podpowiedzi:

$('document').ready(function(){
    $('[data-toggle=tooltip]').tooltip();
});
— Mohsen Newtoa
źródło
-2

Szybka i lżejsza alternatywa dla wtyczki podpowiedzi Bootstrap:

HTML:

<div>
    <div class="mytooltip" id="pwdLabel">
        <label class="control-label" for="password">Password</label>

        <div class="mytooltiptext" id="pwdLabel_tttext">
            6 characters long, must include letters and numbers
        </div>                                

    </div>

    <input type="password" name="password" value="" id="password" autocomplete="off"
           class="form-control" 
           style="width:125px" />
</div>

CSS:

<style>
    .mytooltiptext {
        position: absolute;
        left: 0px;
        top: -45px;
        background-color: black;
        color: white;
        border: 1px dashed silver;
        padding:3px;
        font-size: small;
        text-align: center;
    }

    .mytooltip {
        position: relative;
    }

    .mytooltip label {
        border-bottom: 1px dashed black !important;
    }
</style>

JSCRIPT:

$(".mytooltip").mouseover(function(){
    var elm = this.id;
    $("#" + elm + "_tttext").fadeIn("slow");
});

var ttTmo;
$(".mytooltip").mouseout(function(){
    var elm = this.id;
    clearTimeout(ttTmo);
    ttTmo = setTimeout(function(){
        $("#" + elm + "_tttext").fadeOut("slow");
    },3000);
});

Etykieta / tekst muszą być zawarte w opakowaniu klasy „mytooltip” To opakowanie musi mieć identyfikator.

Po etykiecie znajduje się tekst podpowiedzi zawinięty w div klasy „mytooltiptext” i id składający się z id opakowania nadrzędnego + „_tttext”. Można użyć innych opcji dla selektorów.

Mam nadzieję, że to pomoże.

— jdisla
źródło
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.