Pure CSS Implementation tooltip

Source: Internet
Author: User


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.


<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 .


. 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;}
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.