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

js to realize a simple puzzle game

This article shares the specific code of js to im...

How to start a transaction in MySQL

Preface This article mainly introduces how to sta...

Building command line applications with JavaScript

Table of contents 1. Install node 2. Install Comm...

Methods and techniques for designing an interesting website (picture)

Have you ever encountered a situation where we hav...

Search optimization knowledge to pay attention to in web design

1. Link layout of the new site homepage 1. The loc...

Detailed explanation of html printing related operations and implementation

The principle is to call the window.print() metho...

Detailed explanation of nginx anti-hotlink and anti-crawler configuration

Create a new configuration file (for example, go ...

How to mount a new disk on a Linux cloud server

background A new server was added in the company,...

Detailed explanation of MySQL batch SQL insert performance optimization

For some systems with large amounts of data, the ...

Correct steps to install Nginx in Linux

Preface If you are like me, as a hard-working Jav...

Usage and demonstration of ref in Vue

ref definition: used to register reference inform...

MySQL performance optimization tips

MySQL Performance Optimization MySQL is widely us...

Using Openlayer in Vue to realize loading animation effect

Note: You cannot use scoped animations! ! ! ! via...

Four ways to switch tab pages in VUE

Table of contents 1. Static implementation method...