Pure CSS implementation (no script) Html command-style tooltip text prompt effect

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>
  • tooltip — the content displayed in the bubble;
  • effect — the theme of the bubble (dark / light), dark by default;
  • placement — the position of the bubble relative to the parent element (top / top-left / top-right / right / right-top / right-bottom...), the default is top;

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.

Add an animation

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!
If you find this article helpful, please feel free to reprint it and please indicate the source. Thank you!

<<:  Detailed explanation of mysql deadlock checking and deadlock removal examples

>>:  Solve the problem of Docker starting Elasticsearch7.x and reporting an error

Recommend

Tutorial on installing MySQL 5.6 using RPM in CentOS

All previous projects were deployed in the Window...

What is dns-prefetch? Front-end optimization: DNS pre-resolution improves page speed

Table of contents Background 1. What is dns-prefe...

Tutorial on installing mysql under centos7

Recently, I plan to deploy a cloud disk on my hom...

How to directly reference vue and element-ui in html

The code looks like this: <!DOCTYPE html> &...

How to run JavaScript in Jupyter Notebook

Later, I also added how to use Jupyter Notebook i...

Detailed tutorial on installing MySQL 8 in CentOS 7

Prepare Environmental information for this articl...

Mysql Sql statement comments

You can add comments to MySQL SQL statements. Her...

Automatic backup of MySQL database using shell script

Automatic backup of MySQL database using shell sc...

How to process blob data in MySQL

The specific code is as follows: package epoint.m...

Javascript File and Blob Detailed Explanation

Table of contents File() grammar parameter Exampl...

Vue3.0+vite2 implements dynamic asynchronous component lazy loading

Table of contents Create a Vite project Creating ...

Analyzing the four transaction isolation levels in MySQL through examples

Preface In database operations, in order to effec...

Detailed explanation of permission management commands in Linux (chmod/chown/chgrp/unmask)

Table of contents chmod Example Special attention...

Summary of common problems and application skills in MySQL

Preface In the daily development or maintenance o...

Common causes and solutions for slow MySQL SQL statements

1. Slow query due to lack of index or invalid ind...