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

A mobile adaptive web page effect solves the problem of small display page

For work needs, I need to make a mobile phone adap...

A brief discussion on the use of Web Storage API

Table of contents 1. Browser local storage techno...

Solve the problem of Navicat for Mysql connection error 1251 (connection failed)

Because what I wrote before was not detailed enou...

Design reference WordPress website building success case

Each of these 16 sites is worth reading carefully,...

Example of implementing skeleton screen with Vue

Table of contents Skeleton screen use Vue archite...

Deleting the database and running away? How to use xtraback to back up the MySQL database

1. The mysqldump backup method uses logical backu...

Detailed explanation of count(), group by, order by in MySQL

I recently encountered a problem when doing IM, a...

Detailed explanation of axios encapsulation and API interface management in React project

Table of contents Preface Install Introduction Sw...

Mysql Chinese sorting rules description

When using MySQL, we often sort and query a field...

Research on Web Page Size

<br />According to statistics, the average s...

React mouse multi-selection function configuration method

Generally, lists have selection functions, and si...

Detailed explanation of the solution to the error in creating a user and granting permissions in mysql8.0

Question 1: The writing method that will report a...

Application of HTML and CSS in Flash

Application of HTML and CSS in Flash: I accidental...

MYSQL 5.6 Deployment and monitoring of slave replication

MYSQL 5.6 Deployment and monitoring of slave repl...

Linux file management command example analysis [display, view, statistics, etc.]

This article describes the Linux file management ...