Pure CSS Implementation tooltip

DEMO:

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

Tootip this thing, really where all the need, this time inevitably encountered.

First consider the basic performance of the ToolTip:

Move an element that pops up on an element

This should be the simplest ToolTip.

The first is to move to the trigger effect on an element, which presumably uses :hover pseudo-classes. But the response to it is another element, here need to achieve a linkage effect, the simplest method, that is nested, with the outer element as a container, using :hover pseudo-class derivation method to let the elements inside the container also changed, here is to let the ToolTip display it ~

So, first to get a few of their own container of the ToolTip bar.

Html:

<Divclass= "Tooltip-wrapper">    <span><ahref="#">Ab</a><spanclass= "tooltip">Angel beats!</span></span>    <span><ahref="#">SAO</a><spanclass= "tooltip">Sword Art Online</span></span>    <span><ahref="#">Gto</a><spanclass= "tooltip">Great Teacher Onizuka</span></span>    <span><ahref="#">TRC</a><spanclass= "tooltip">Tsubasa Reservoir Chronicle</span></span>    <span><ahref="#">D.C.</a><spanclass= "tooltip">Da Capo</span></span></Div>

The next step is the key CSS, which has several key areas:

• In general, the ToolTip should not be displayed, so the simplest is to set its transparency to 0 ( opacity:0; ).
• For the location of the ToolTip, the tooltip appears just above the container in this demo, in order to set the ToolTip relative to the container's positioning, set its parent element to relative positioning ( position:relative; ).
• The tooltip is displayed when the parent element of the ToolTip is under the cursor, and this style is set by the pseudo-class derivation of the parent element :hover .
• In order to make the ToolTip appear harmonious point, add a transition .

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: -;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;}