CSS -nutswenk
Skep gereedskapwenke met CSS.
Demo: Nutswenk voorbeelde
'n Nutswenk word dikwels gebruik om ekstra inligting oor iets te spesifiseer wanneer die gebruiker die muiswyser oor 'n element beweeg:
Basiese nutswenk
Skep 'n nutswenk wat verskyn wanneer die gebruiker die muis oor 'n element beweeg:
Voorbeeld
<style>
/* Tooltip container */
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted
black; /* If you want dots under the hoverable text */
}
/* Tooltip text
*/
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* Position the tooltip text - see examples below! */
position: absolute;
z-index: 1;
}
/* Show
the tooltip text when you mouse over the tooltip container */
.tooltip:hover
.tooltiptext {
visibility: visible;
}
</style>
<div class="tooltip">Hover
over me
<span class="tooltiptext">Tooltip
text</span>
</div>
Voorbeeld Verduidelik
HTML: Gebruik 'n houerelement (soos <div>) en voeg die
"tooltip"klas daarby. Wanneer die gebruiker oor hierdie <div> beweeg, sal dit die nutswenk-teks wys.
Die nutswenk-teks word binne 'n inlyn-element (soos <span>) geplaas met class="tooltiptext".
CSS: Die tooltipklas gebruik position:relative, wat nodig is om die nutswenk-teks ( position:absolute) te posisioneer.
Let wel: Sien voorbeelde hieronder oor hoe om die nutswenk te plaas.
Die tooltiptextklas hou die werklike nutswenk-teks. Dit is by verstek versteek en sal sigbaar wees as jy beweeg (sien hieronder). Ons het ook 'n paar basiese style daarby gevoeg: 120px breedte, swart agtergrondkleur, wit tekskleur, gesentreerde teks en 5px bo- en ondervulling.
Die CSS border-radius-eienskap word gebruik om afgeronde hoeke by die nutswenkteks te voeg.
Die :hoverkieser word gebruik om die nutswenk-teks te wys wanneer die gebruiker die muis oor die <div> beweeg met class="tooltip".
Posisionering gereedskapwenke
In hierdie voorbeeld word die nutswenk regs ( left:105%) van die "sweefbare" teks (<div>) geplaas. Let ook op wat top:-5pxgebruik word om dit in die middel van sy houerelement te plaas. Ons gebruik die nommer 5 omdat die nutswenkteks 'n boonste en onderste vulling van 5px het. As jy sy vulling verhoog, verhoog ook die waarde van die topeiendom om te verseker dat dit in die middel bly (as dit iets is wat jy wil hê). Dieselfde geld as jy die nutswenk aan die linkerkant wil plaas.
Regs nutswenk
.tooltip .tooltiptext {
top: -5px;
left:
105%;
}
Resultaat:
Linker nutswenk
.tooltip .tooltiptext {
top: -5px;
right:
105%;
}
Resultaat:
As jy wil hê dat die nutswenk bo- of onderaan moet verskyn, sien voorbeelde hieronder. Let daarop dat ons die margin-lefteiendom met 'n waarde van minus 60 pixels gebruik. Dit is om die nutswenk bo/onder die sweefbare teks te sentreer. Dit is ingestel op die helfte van die nutswenk se breedte (120/2 = 60).
Top Nutswenk
.tooltip .tooltiptext {
width: 120px;
bottom: 100%;
left:
50%;
margin-left: -60px; /* Use half of the width
(120/2 = 60), to center the tooltip */
}
Resultaat:
Onderste nutswenk
.tooltip .tooltiptext {
width: 120px;
top: 100%;
left:
50%;
margin-left: -60px; /* Use half of the width
(120/2 = 60), to center the tooltip */
}
Resultaat:
Tooltip-pyltjies
Om 'n pyltjie te skep wat van 'n spesifieke kant van die tooltip moet verskyn, voeg "leë" inhoud na tooltip by, met die pseudo-element klas ::aftersaam met die content
eiendom. Die pyl self word met behulp van grense geskep. Dit sal die nutswenk soos 'n spraakborrel laat lyk.
Hierdie voorbeeld demonstreer hoe om 'n pyltjie aan die onderkant van die nutswenk by te voeg:
Onderste Pyltjie
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 100%;
/* At the bottom of the tooltip */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}
Resultaat:
Voorbeeld Verduidelik
Plaas die pyltjie binne-in die nutswenk: top: 100%sal die pyltjie onderaan die nutswenk plaas. left: 50%sal die pyl sentreer.
Let wel: Die border-widtheiendom spesifiseer die grootte van die pyl. As jy dit verander, verander ook die margin-leftwaarde na dieselfde. Dit sal die pyl gesentreer hou.
Die border-colorword gebruik om die inhoud in 'n pyl te omskep. Ons stel die boonste rand op swart, en die res op deursigtig. As alle kante swart was, sou jy met 'n swart vierkantige boks eindig.
Hierdie voorbeeld demonstreer hoe om 'n pyltjie aan die bokant van die nutswenk te voeg. Let daarop dat ons hierdie keer die onderste randkleur gestel het:
Bo-pyltjie
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
bottom: 100%; /* At the top of the tooltip */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent black transparent;
}
Resultaat:
Hierdie voorbeeld demonstreer hoe om 'n pyltjie aan die linkerkant van die nutswenk by te voeg:
Pyltjie links
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 50%;
right: 100%; /* To the left of the tooltip
*/
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent black transparent transparent;
}
Resultaat:
Hierdie voorbeeld demonstreer hoe om 'n pyltjie regs van die nutswenk by te voeg:
Regspyltjie
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 50%;
left: 100%; /* To the right of the
tooltip */
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent transparent black;
}
Resultaat:
Fade In Tooltips (animasie)
As jy die nutswenk-teks wil vervaag wanneer dit op die punt is om sigbaar te wees, kan jy die CSS- transitioneienskap saam met die opacity
eiendom gebruik, en gaan van heeltemal onsigbaar tot 100% sigbaar, binne 'n aantal gespesifiseerde sekondes (1 sekonde in ons voorbeeld):
Voorbeeld
.tooltip .tooltiptext {
opacity: 0;
transition: opacity 1s;
}
.tooltip:hover
.tooltiptext {
opacity: 1;
}