Pure css implementation (no script) Html imperative tooltip text prompt effect

Analyze the execution process. Move the mouse into the node to detect whether the node exists to enable the tooltip implementation (class name, attributes, etc.). Detect the topic and location (class name, attributes, etc.). Generate/display bubbles to learn from others.

Let us first take a look at the tooltip style of element-ui

Obviously, the position of the bubble is added through javascript script

Without further ado, let’s set some expectations. No JavaScript scripts are needed. Pure CSS implementation does not require adding new elements** (using after and before pseudo-elements)** No need for class name matching, directly using attribute selectors** ([attr ])** Supports default style** (when the tag does not define the theme and position)** Imperative** (define it directly in the tag, and then leave it to css for matching)** Use sass to implement the theme and position of the bubble Preprocessor development (students who don’t understand can convert it to css ) html definition directive specification

 <button tooltip='I am a content duck' effect='light' placement='top-left'>Top Left</button> 

• tooltip — the content displayed by the bubble;
• effect — the theme of the bubble (dark / light), default dark;
• placement — the position of the bubble relative to the parent element (top / top-left/ top-right / right / right-top/ right-bottom...), default top;

Write a few buttons first

Style reference element-ui

 <div class=container> <div class=top> <button tooltip=top placement=top-left effect=light>top left</button> <button tooltip=top left top left placement=top>top</button> <button tooltip=top-right placement=top-right>top-right</button> </div> <div class=left> <button tooltip=upper left upper left upper left upper left upper left upper left upper left upper left upper left placement=left-top>left upper</button> <button tooltip=left placement=left effect=light>left</button> <button tooltip=left and right placement=left-bottom >Lower left</button> </div> <div class=right> <button tooltip=upper right upper right upper right upper right upper right upper right upper right upper right upper right placement=right-top>top right</button> <button tooltip=right placement=right effect=light>right</button> <button tooltip=right lower placement=right-bottom> Bottom right</button> </div> <div class=bottom> <button tooltip=bottom left bottom left placement=bottom-left>bottom left</button> <button tooltip=bottom placement=bottom effect=light>bottom</button> <button tooltip=bottom right placement=bottom-right>bottom right</button> </div></div>

hover monitors mouse movement in and out, **[tooltip]** matches labels with this attribute, after is a bubble, and before is a triangle

 /* Match elements with the tooltip attribute */[tooltip] { position: relative; /* Default style of bubbles*/ &::after { display: none; content: attr(tooltip); } /* Default style of triangles*/ & ::before { display: none; content: ''; } /* Move the mouse into the element to display bubbles and triangles */ &:hover { &::after { display: block; } &::before { display: block; } }}

Now the effect will be effective after moving the mouse into it

In order to easily see the effect, the test can default bubbles and triangles to block.

 /* Default style of bubbles*/&::after { display: block; content: attr(tooltip);}/* Default style of triangles*/&::before { display: block; content: '';}

The current effect is as follows

The core display is of course set to absolute positioning

 /* Bubble default style */&::after { display: block; content: attr(tooltip); position: absolute; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 8px 15px; max- width: 200px; border-radius: 4px; box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.4); z-index: 100; @extend .tooltip-theme-dark; /* Inherit the default theme (white text on black background) */ }/* Triangle default style */&::before { display: block; content : ''; position: absolute; border: 5px solid transparent; z-index: 100; @extend .triangle-theme-dark; /* Inherit the default theme (black background) */}

The current effect is as follows

Define two themes each

 $white: #fff;$black: #313131;/* Bubble theme*/.tooltip-theme-dark { color: $white; background-color: $black;}.tooltip-theme-light { color: $black; background-color: $white; border: 1px solid $black;}/* triangle theme*/.triangle-theme-dark { border-top-color: $black;}.triangle-theme-light { border-top-color: $black; /* Same as dark for now*/}

 /* Bubble position*//*----Top----*/.tooltip-placement-top { bottom: calc(100% + 10px); left: 50%; transform: translate(-50%, 0 );}.tooltip-placement-top-right { bottom: calc(100% + 10px); left: 100%; transform: translate(-100%, 0)}.tooltip-placement-top-left { bottom: calc(100% + 10px); left: 0; transform: translate(0, 0)}/* triangle position*//*----top-- --*/.triangle-placement-top { bottom: calc(100% + 5px); left: 50%; transform: translate(-50%, 0);}.triangle-placement-top-left { bottom: calc(100% + 5px); left: 10px;}.triangle-placement-top-right { bottom: calc(100% + 5px); right: 10px;}

This is also the core code. Use the attribute selector to match the value on the label, and then set different styles.

Matching bubbles, triangle themes

 &[effect=light] { &::after { @extend .tooltip-theme-light; } &::before { @extend .triangle-theme-light; }}

Match bubble and triangle positions, 12 positions

 @each $placement in top,top-right,top-left,right,right-top,right-bottom,bottom,bottom-right,bottom-left,left,left-top,left-bottom { &[placement=# {$placement}] { &::after { @extend .tooltip-placement-#{$placement}; } &::before { @extend .triangle-placement-#{$placement}; } }}

If the label does not have a placement attribute / is empty, the top position will be inherited by default.

 &:not([placement]),&[placement=] { &::after { @extend .tooltip-placement-top; } &::before { @extend .triangle-placement-top; }}

The current effect is as follows

Let's make the text longer and add display:none to the default styles of bubbles and triangles.

Divided into four directions, up, down, left, and right, four animations

 @keyframes anime-top { from { opacity: .5; bottom: 150%; }}@keyframes anime-bottom { from { opacity: .5; top: 150%; }}@keyframes anime-left { from { opacity: .5; right: 150%; }}@keyframes anime-right { from { opacity: .5; left: 150%; }}

Match the bubble position to determine which animation to execute. Use **[attr^=]** to select. For example, upper left and upper right can also be matched.

 /* Set animation*/@each $placement in top, right,bottom,left { &[placement^=#{$placement}] { &::after, &::before { animation: anime-#{$placement} 300ms ease-out forwards; } }}

The final effect is as follows

Attached is the codepen address codepen.io/anon/pen/yR…

The above is the pure CSS implementation (no script) Html directive tooltip text prompt effect introduced by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank everyone for your support of the VeVb martial arts website!

If you think this article is helpful to you, you are welcome to reprint it, please indicate the source, thank you!