Najnowsze tutoriale tworzenie stron internetowych
 

W3.CSS podpowiedzi


Podpowiedzi wyświetlania tekstu (lub inne treści) po najechaniu na element HTML.


Inline Tooltip Text

Najedź na poniższym zdaniu!

9 mln Londyn jest stolicą Anglii.

Klasa w3-etykietka definiuje element HTML do Najedź na pojemnik (podpowiedź).

Klasa w3 tekstu definiuje tekst podpowiedzi:

Przykład

<p class="w3-tooltip">London
<span class="w3-text">9 million</span>
is the capital city of England</p>
Spróbuj sam "

Inline Etykietka Tag

Najedź na poniższym zdaniu!

9 mln Londyn jest stolicą Anglii.

Klasa w3-etykietka definiuje element HTML do Najedź na pojemnik (podpowiedź).

Klasa w3 tekstu definiuje tekst podpowiedzi:

Przykład

<p class="w3-tooltip">London
<span class="w3-text w3-tag">9 million</span>
is the capital city of England</p>
Spróbuj sam "

Duży Tooltip

Najedź na to zdjęcie, aby zobaczyć efekt:

Samochód

Samochód jest na kółkach, z własnym zasilaniem pojazd silnikowy używany do transportu. Większość definicji tego terminu określić, że samochody mają zazwyczaj cztery koła. (Wikipedia)

Klasa w3-etykietka definiuje element HTML do Najedź na pojemnik (podpowiedź).

Klasa w3 tekstu definiuje tekst podpowiedzi:

Przykład (tekst przed obrazem)

<div class="w3-tooltip">

<p class="w3-text">A car is a wheeled, self-powered motor vehicle used for transportation. Most definitions of the term specify that cars typically have four wheels.(Wikipedia)</p>

<img src="img_car.jpg" alt="Car" style="width:100%">

</div>
Spróbuj sam "

Przykład (tekst po zdjęciu)

<div class="w3-tooltip">

<img src="img_car.jpg" alt="Car" style="width:100%">

<p class="w3-text">A car is a wheeled, self-powered motor vehicle used for transportation. Most definitions of the term specify that cars typically have four wheels.(Wikipedia)</p>

</div>
Spróbuj sam "

absolutna Tooltip

Jeśli chcesz podpowiedź do stawienia się w bezwzględną, Stanowisko tekst podpowiedzi (W3-Text):

Przykład

<p class="w3-tooltip">London is the capital city of England.
<span style="position:absolute;left:0;bottom:18px"
class="w3-text w3-tag">9million</span></p>
Spróbuj sam "

Barwne Tooltip

Jeśli chcesz kolorową podpowiedź, użyć klas w3-color:

Przykład

<span class="w3-text w3-tag w3-red ">9 million</span>
Spróbuj sam "

zaokrąglone Tooltip

Jeśli chcesz zaokrąglony podpowiedź, użyć klas w3 rundy:

Przykład

<span class="w3-text w3-tag w3-round ">9 million</span>
Spróbuj sam "

małe Tooltip

Jeśli chcesz małą podpowiedź, użyć klasy w3-mały:

Przykład

<span class="w3-text w3-tag w3-small ">9 million</span>
Spróbuj sam "

Tiny Tooltip

Jeśli chcesz się maleńka podpowiedź, użyć klasy w3-tiny:

Przykład

<span class="w3-text w3-tag w3-tiny ">9 million</span>
Spróbuj sam "

Duży Tooltip

Jeśli chcesz dużą podpowiedź, należy użyć klasy W3-large:

Przykład

<span class="w3-text w3-tag w3-xlarge ">9 million</span>
Spróbuj sam "