W poniższym kodzie chcę, aby pojawiła się podpowiedź, gdy użytkownik najedzie na zakres, jak to zrobić? Nie chcę używać żadnych linków.
<span> text </span>
W poniższym kodzie chcę, aby pojawiła się podpowiedź, gdy użytkownik najedzie na zakres, jak to zrobić? Nie chcę używać żadnych linków.
<span> text </span>
Odpowiedzi:
Oto prosty, wbudowany sposób:
<span title="My tip">text</span>
To daje ci zwykłe podpowiedzi tekstowe. Jeśli potrzebujesz bogatych podpowiedzi zawierających sformatowany kod HTML, musisz to zrobić, korzystając z biblioteki. Na szczęście jest ich mnóstwo .
Alternatywnie do domyślnych title
podpowiedzi atrybutów możesz tworzyć własne niestandardowe podpowiedzi CSS przy użyciu :before
/ :after
pseudo elementów i data-*
atrybutów HTML5 .
Korzystając z dostarczonego CSS, możesz dodać etykietkę do elementu za pomocą data-tooltip
atrybutu.
Możesz także kontrolować pozycję niestandardowej podpowiedzi za pomocą data-tooltip-position
atrybutu (akceptowane wartości: top
/ right
/ bottom
/ left
).
Na przykład, poniższe doda blat narzędziowy umieszczony na dole elementu rozpiętości.
<span data-tooltip="Custom tooltip text." data-tooltip-position="bottom">Custom bottom tooltip.</span>
Możesz wyświetlić niestandardowe podpowiedzi z pseudoelementami, pobierając niestandardowe wartości atrybutów za pomocą attr()
funkcji.
[data-tooltip]:before {
content: attr(data-tooltip);
}
Jeśli chodzi o umiejscowienie podpowiedzi, wystarczy użyć selektora atrybutu i zmienić położenie w oparciu o wartość atrybutu.
W tym przykładzie wykorzystano pełny CSS - dostosuj go do swoich potrzeb.
[data-tooltip] {
display: inline-block;
position: relative;
cursor: help;
padding: 4px;
}
/* Tooltip styling */
[data-tooltip]:before {
content: attr(data-tooltip);
display: none;
position: absolute;
background: #000;
color: #fff;
padding: 4px 8px;
font-size: 14px;
line-height: 1.4;
min-width: 100px;
text-align: center;
border-radius: 4px;
}
/* Dynamic horizontal centering */
[data-tooltip-position="top"]:before,
[data-tooltip-position="bottom"]:before {
left: 50%;
-ms-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
/* Dynamic vertical centering */
[data-tooltip-position="right"]:before,
[data-tooltip-position="left"]:before {
top: 50%;
-ms-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
[data-tooltip-position="top"]:before {
bottom: 100%;
margin-bottom: 6px;
}
[data-tooltip-position="right"]:before {
left: 100%;
margin-left: 6px;
}
[data-tooltip-position="bottom"]:before {
top: 100%;
margin-top: 6px;
}
[data-tooltip-position="left"]:before {
right: 100%;
margin-right: 6px;
}
/* Tooltip arrow styling/placement */
[data-tooltip]:after {
content: '';
display: none;
position: absolute;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
/* Dynamic horizontal centering for the tooltip */
[data-tooltip-position="top"]:after,
[data-tooltip-position="bottom"]:after {
left: 50%;
margin-left: -6px;
}
/* Dynamic vertical centering for the tooltip */
[data-tooltip-position="right"]:after,
[data-tooltip-position="left"]:after {
top: 50%;
margin-top: -6px;
}
[data-tooltip-position="top"]:after {
bottom: 100%;
border-width: 6px 6px 0;
border-top-color: #000;
}
[data-tooltip-position="right"]:after {
left: 100%;
border-width: 6px 6px 6px 0;
border-right-color: #000;
}
[data-tooltip-position="bottom"]:after {
top: 100%;
border-width: 0 6px 6px;
border-bottom-color: #000;
}
[data-tooltip-position="left"]:after {
right: 100%;
border-width: 6px 0 6px 6px;
border-left-color: #000;
}
/* Show the tooltip when hovering */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
display: block;
z-index: 50;
}
W większości przeglądarek atrybut title będzie renderowany jako podpowiedź i ogólnie jest elastyczny w zakresie rodzajów elementów, z którymi będzie współpracował.
<span title="This will show as a tooltip">Mouse over for a tooltip!</span>
<a href="http://www.stackoverflow.com" title="Link to stackoverflow.com">stackoverflow.com</a>
<img src="something.png" alt="Something" title="Something">
Wszystkie z nich wyświetlają podpowiedzi w większości przeglądarek.
Jako podstawową podpowiedź potrzebujesz:
<span title="This is my tooltip"> Hover on me to see tooltip! </span>