Add an animation
Pure CSS implementation (no script) Html command-style tooltip text prompt effect
|
Analyze the execution process. Move the mouse into the node to detect whether the node has the identifier (class name, attribute, etc.) to open the tooltip implementation. Detect the subject and location (class name, attribute, etc.). Generate/display bubbles. Learn from others. Let's first look at the tooltip style of element-ui
Obviously, the position of the bubble is added by JavaScript script
Without further ado, let's set some expectations. No need for javascript, pure CSS implementation. No need to add new elements** (use after, before pseudo-elements)** No need to match class names, use attribute selectors directly** ([attr])** Support default styles** (when the tag does not define the theme or position)** Directive** (just define it in the tag, and then let CSS match it)** Implement the theme and position of the bubble using the sass preprocessor (those who don't understand can convert it to CSS ) HTML definition directive specification Imperative Declaration <button tooltip='I am a content duck' effect='light' placement='top-left'>Top left</button>
Write a few buttons first The style is inspired by 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="Top left top left top left top left top left top left top left top left top left" placement="left-top">Top left</button>
<button tooltip="Left" placement="left" effect="light">Left</button>
<button tooltip="Left-right" placement="left-bottom">Bottom left</button>
</div>
<div class="right">
<button tooltip="Top right top right top right top right top right top right top right top right" placement="right-top">Top right</button>
<button tooltip="Right" placement="right" effect="light">Right</button>
<button tooltip="Bottom Right" placement="right-bottom">Bottom Right</button>
</div>
<div class="bottom">
<button tooltip="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>CSS core code logic implementation Hover monitors the mouse moving in and out, **[tooltip]** matches tags with this attribute, after is a bubble, before is a triangle
/* Matches elements with a tooltip attribute */
[tooltip]
position: relative;
/* Bubble default style */
&::after {
display: none;
content: attr(tooltip);
}
/* Triangle default style*/
&::before {
display: none;
content: '';
}
/* Move the mouse into this element to display bubbles and triangles*/
&:hover {
&::after {
display: block;
}
&::before {
display: block;
}
}
}Now it will take effect when you move the mouse
In order to see the effect more easily, the test can set the bubbles and triangles to block by default.
/* Bubble default style */
&::after {
display: block;
content: attr(tooltip);
}
/* Triangle default style*/
&::before {
display: block;
content: '';
}The current effect is as follows
Set the default style of bubbles and triangles 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 (black background and white text) */
}
/* 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
Customize bubble and triangle theme colors Define two themes
$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*/
}Customize bubble and triangle positions (only one direction is shown)
/* Bubble position */
/*----superior----*/
.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 */
/*----superior----*/
.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;
}Capture location, subject This is also the core code. Use attribute selectors to match the value on the tag and then set different styles. Matching bubbles, triangle themes
&[effect="light"] {
&::after {
@extend .tooltip-theme-light;
}
&::before {
@extend .triangle-theme-light;
}
}Match bubbles 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};
}
}
}When the placement attribute does not exist in a tag or is empty, it inherits the top position by default.
&:not([placement]),
&[placement=""] {
&::after {
@extend .tooltip-placement-top;
}
&::before {
@extend .triangle-placement-top;
}
}The current effect is as follows
Let's lengthen the text and add display:none to the default styles of the bubble and triangle.
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, such as top left and top right.
/* Set up 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
Attach the codepen address codepen.io/anon/pen/yR … Summarize The above is the pure CSS implementation (no script) of Html directive tooltip text prompt effect introduced by the editor. I hope it will be helpful to everyone. 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 their support of the 123WORDPRESS.COM website! |
<<: Detailed explanation of mysql deadlock checking and deadlock removal examples
>>: Solve the problem of Docker starting Elasticsearch7.x and reporting an error
Recommend
Introduction to generating Kubernetes certificates using OpenSSL
Kubernetes supports three types of authentication...
Summary of Nginx location and proxy_pass path configuration issues
Table of contents 1. Basic configuration of Nginx...
Several ways to implement 0ms delay timer in js
Table of contents queueMicrotask async/await Mess...
How to define data examples in Vue
Preface In the development process, defining vari...
Vue uses vue meta info to set the title and meta information of each page
title: vue uses vue-meta-info to set the title an...
calc() to achieve full screen background fixed width content
Over the past few years, there has been a trend i...
Summary of the use of Vue computed properties and listeners
1. Computed properties and listeners 1.1 Computed...
Introduction to using Unicode characters in web pages (&#,\u, etc.)
The earliest computers could only use ASCII chara...
HTML+CSS realizes scrolling to the element position to display the loading animation effect
How to add a loading animation every time I scrol...
Solution to the problem of text position jumping when the search text box leaves the focus
When setting the text in the search text box, the...
Docker uses busybox to create a base image
The first line of a Docker image starts with an i...
js implements the classic minesweeper game
This article example shares the specific code of ...
Recommended plugins and usage examples for vue unit testing
Table of contents frame First-class error reporti...
Front-end vue+express file upload and download example
Create a new server.js yarn init -y yarn add expr...
Use of Linux chkconfig command
1. Command Introduction The chkconfig command is ...