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