Implement Tooltip with pure CSS

DEMO:

ABAngel Beats! SAOSword Art Online GTOGreat Teacher Onizuka TRCTsubasa Reservoir Chronicle D. C. Da Capo

Tootip is something that is really useful everywhere, and it will inevitably happen during this period of time.

First, consider the basic performance of tooltip:

Elements that will pop up when you move to an element

This should be the simplest tooltip.

First, move to an element to trigger the effect, which must be used here:hoverPseudo class. However, the response is another element. here we need to implement a linkage effect. The simplest method is nesting, using outer elements as containers and using:hoverPseudo-class-derived methods are used to change the elements inside the container. Here, the tooltip is displayed ~

So let's get a few tooltip of the built-in container first.

HTML:

<div class="tooltip-wrapper">    <span><a href="#">AB</a><span class="tooltip">Angel Beats!</span></span>    <span><a href="#">SAO</a><span class="tooltip">Sword Art Online</span></span>    <span><a href="#">GTO</a><span class="tooltip">Great Teacher Onizuka</span></span>    <span><a href="#">TRC</a><span class="tooltip">Tsubasa Reservoir Chronicle</span></span>    <span><a href="#">D.C.</a><span class="tooltip">Da Capo</span></span></div>

The next step is the key CSS. There are several key points:

• In general, tooltip should not be displayed, so the simplest thing is to set its transparency to 0 (opacity:0;).
• In this demonstration, the tooltip appears at the top of the container. To locate the tooltip relative to the container, set its parent element to relative location (position:relative;).
• When the parent element of a tooltip is placed under the cursor, The tooltip is displayed.:hoverPseudo-class derivation to set.
• To make the tooltip appear more harmonious, addtransition.

CSS:

.tooltip-wrapper{    margin:5em 2em;    font-size:24px;}/*Normal State*/.tooltip-wrapper>span{    position:relative;    display:inline-block;    height:3em;    width:3em;    margin:0 0.4em;    line-height:3em;    text-align:center;    font-weight:600;    color:white;    background:rgba(204,153,255,0.8);    border: 6px solid rgba(223,191,255,0.8);    border-radius:3em;    box-shadow:0 0 5px rgba(223,191,255,0.8);}.tooltip{    position:absolute;    top:0;    left:-25%;    width:5em;    line-height:1em;    font-size:16px;    text-align:center;    padding:0.3em 0.5em;    color:snow;    background:#bbb;    border:2px solid rgba(147,126,168,0.8);    border-radius:3px;    opacity:0;}/*Active State*/.tooltip-wrapper>span:hover{    color:rgba(133,101,168,0.8);    background:rgba(255,255,255,0.8);    border:6px solid rgba(135,101,168,0.8);    border-radius:3em;    box-shadow:0 0 20px rgba(223,191,255,0.8);    transition:all 0.2s ease-in-out;}.tooltip-wrapper>span:hover .tooltip{    top:-5em;    border-radius:5px;    opacity:1;    transition:all 0.2s ease-in-out;}