CSS työkalut
- Edellinen sivu CSS animaatiot
- Seuraava sivu CSS kuvatyylit
通过 CSS 创建工具提示（Tooltip）。
演示：工具提示
Esimerkki
当用户将鼠标指针移到元素上时，工具提示通常用于提供关于某内容的额外信息：
基础的工具提示
创建一个鼠标移到元素上时显示的工具提示：
Esimerkki
<style>
/* Tooltip 容器 */
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black; /* 如果需要在可悬停文本下面显示点线 */
}
/* Tooltip 文本 */
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* 定位工具提示文本 - 请看下面的例子 */
position: absolute;
z-index: 1;
}
/* 将鼠标悬停在工具提示容器上时，显示工具提示文本 */
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<div class="tooltip">Hover over me</div>
<span class="tooltiptext">Tooltip text</span>
</div>
Esimerkki selityksellä
HTML：
Käytä konttielelementtiä (esim. <div>) ja lisää "tooltip" Luokassa. Kun käyttäjä siirtää hiiren päälle tähän <div>:hen, näkyy työkaluohjeen teksti.
Työkaluohjeen teksti sijaitsee class="tooltiptext" upotetuissa elementeissä (esim. <span>).
CSS:ta
tooltip Luokka käyttää position:relative，jotta työkaluohjeen teksti voidaan sijoittaa (position:absolute）。Huomaa: Työkaluohjeen sijoittamisesta on lisätty esimerkki alla.
tooltiptext Luokka tallentaa todellisen työkaluohjeen tekstin. Oletuksena se on piilotettu ja se näkyy hiiren liikkuessaan päällä (katso alla). Lisäksi olemme lisänneet sille joitakin perusmuotoiluja: 120 pikselin leveys, musta tausta, valkoinen teksti, teksti keskellä ja 5 pikselin ylä- ja alareunat sisätila (padding).
CSS border-radius Atribuutti lisää kulmien pyöristämisen työkaluohjeen tekstiin.
Kun käyttäjä siirtää hiiren class="tooltip" sisältävään <div>:hen,:hover Valitsin näyttää työkaluohjeen tekstin.
Asettele työkaluohje
Tässä esimerkissä työkaluohje sijaitsee "liukukkeella" tekstin (left:105%）。Lisäksi huomaa,top:-5px Käytetään sen sijoittamiseen sen konttielelementin keskelle. Käytämme numeroa 5, koska työkaluohjeen tekstin ylä- ja alareunat sisältävät 5 pikselin sisäisen reunan. Jos lisäät sisäisiä reunia, lisää myös top Atribuutin arvo, jotta se pysyy keskellä. Jos haluat sijoittaa työkaluohjeen vasemmalle, se pätee myös.
Oikeanpuolinen työkaluohje
.tooltip .tooltiptext {
top: -5px;
left: 105%;
}
Tulos:
Vasemmanpuolinen työkaluohje
.tooltip .tooltiptext {
top: -5px;
right: 105%;
}
Tulos:
Jos haluat, että työkaluohje sijaitsee ylhäällä tai alhaalla, katso alla oleva esimerkki. Huomaa, että käytimme miinus 60 pikselin vasemman reunan marginaalin (margin-left). Tämä on tehty työkaluohjeen ja liukukkeen tekstin keskittämiseksi. Arvo on työkaluohjeen leveyden puolet (120/2 = 60).
Yläpuolinen työkaluohje
.tooltip .tooltiptext {
width: 120px;
bottom: 100%;
left: 50%;
margin-left: -60px; /* Käytä puolta leveydestä (120/2 = 60), jotta työkaluohje keskittyy */
}
Tulos:
Alapuolinen työkaluohje
.tooltip .tooltiptext {
width: 120px;
top: 100%;
left: 50%;
margin-left: -60px; /* Käytä puolta leveydestä (120/2 = 60), jotta työkaluohje keskittyy */
}
Tulos:
Työkaluohjeen nuoli
Jos haluat luoda nuolin, joka näkyy työkaluohjeen määrittämällä sivulla, lisää työkaluohjeen jälkeen "tyhjä" sisältö ja käytä tekoelementin luokkaa ::after ja content ominaisuudet. Nuoli itsessään on luotu reunalla. Tämä tekee työkaluvihjeestä泡っかけのようになります。
Tämä esimerkki näyttää, miten voit lisätä nuolia työkaluvihjeen alapuolelle:
Alapuoli nuoli
.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;
}
Tulos:
Esimerkki selityksellä
sijoittaa nuolen työkaluvihjeen sisälle:top: 100% sijoittaa nuolen työkaluvihjeen alapuolelle.left: 50% asettaa nuolen keskelle.
Huomioitavaa:border-width ominaisuus määrittää nuolen kokoon. Jos muutat tätä asetusta, muuta myös margin-left arvon muuttaminen samaksi arvoksi. Tämä keskittää nuolen.
border-color Käytetään sisällön muuntamiseen nuoleksi. Asetamme ylän reunan mustaksi ja muut reunat läpinäkyviksi. Jos kaikki reunat ovat mustia, lopputuloksena on musta neliökehä.
Tämä esimerkki näyttää, miten voit lisätä nuolia työkaluvihjeen ylälle. Huomaa, että tässä asetamme alapuolen reunan värin:
Ylänuoli
.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;
}
Tulos:
Tämä esimerkki näyttää, miten voit lisätä nuolia työkaluvihjeen vasemmalle puolelle:
Vasen nuoli
.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;
}
Tulos:
Tämä esimerkki näyttää, miten voit lisätä nuolia työkaluvihjeen oikealle puolelle:
Oikea nuoli
.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;
}
Tulos:
Pehmeästi syttyvä työkaluviesti (animaatio)
Jos haluat, että tulossa oleva työkaluviestisi näkyy pehmeästi, voit käyttää CSS transition Ominaisuus yhdessä opacity Ominaisuudet käytetään yhdessä ja muuttuvat täysin näkymättömästä 100% näkyvään määräajassa (esimerkissä 1 sekunti):
Esimerkki
.tooltip .tooltiptext {
opacity: 0;
transition: opacity 1s;
}
.tooltip:hover .tooltiptext {
opacity: 1;
}
- Edellinen sivu CSS animaatiot
- Seuraava sivu CSS kuvatyylit
