The third group discussion topic: the implementation of mouse hovering TIPS

Topic of discussion

Implement a mouse hover tooltip effect



Address of discussion forum:www.yuque.com/kuwu/vgfxx6…

Implementation cases

Jsbin.com/nevujitewi/…

Codepen. IO/litstronger…



Some skills

You can use custom properties to pass in simple prompts

Custom data attributesIt gives us the ability to embed custom data attributes on all HTML elements and to script the exchange of proprietary data between HTML and DOM representations.



It’s easy to use,data-*The Nuggets article, for example, uses custom properties when you want to store additional information that doesn’t need to be displayed in the browser.articleThere are on the labeldata-entry-id 和 data=draft-id, these two are the custom attributes, guess is the id of the post and draft state ID.



Yes in the CSSattrProperty accesses custom properties as follows:

<a href="#" class="tips" data-title="Tooltip" data-dir="top">upward</a>.tips::before { content: attr(data-title); Padding: 0.3 em. border-radius: 5%; color: #fff; background: #000; }Copy the code

The value of a custom attribute can be obtained by the getAttribute() method in JavaScript or accessed by the dataset.

<a href="#" class="tips" data-title="Tooltip" data-dir="top">upward</a>Var a = document.querySelector(' selector ') a.dataset.title = 'selector'Copy the code



Therefore, tips tips in simple scenarios can be realized through custom attributes, and it is convenient to modify the tips through JS.

Padding Margin border color

  • The padding color is the same as the content color
  • Border can have its own color, which is black by default
  • Margin colorless

Implement a simple triangle using border



willwidth 和 heightSet it to 0, and then setborder 的 size 和 colorTo control the size and color of the triangle, when only the bottom triangle is needed, you can set the other three triangles to be transparent, and then leave them aloneborder-bottomColor to achieve, and so on.

Layout through absolute positioning

The parent element is relative to the child element, and the child element is absolute. ::after and ::before can be thought of as children of the corresponding HTML tag. Absolute positioning of child elements relative to parent elements is controlled by the left top right Bottom. Make the Tips appear directly above the parent element. Left =50% to center, bottom=100% to be 100% above content, and below before to be close to the upper content. Once the layout is in place, adjust the offset before by transform: translateX(-50%)

.tips[data-dir="top"]::before {
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translateX(-50%);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
}
Copy the code

useemTo accommodate font changes

1em equals the current font size. 2em is equal to twice the current font size. For example, if an element is displayed at 12pt, 2em is 24pt. Em is a very useful unit in CSS because it automatically ADAPTS to the font the user is using.

.tips[data-dir="top"]::after {
  margin-bottom: -1em;
  border: 0.6 em solid transparent;
  border-top-color: currentColor;
}
Copy the code

Does not correspond to mouse events

When hover is used, such a scene will occur. When hover appears, tips will block other operators, and when HOVER responds, TIPS will not be able to directly locate the operator, resulting in poor experience.

When you hover over the left A TAB, the tips appear to cover the downward A TAB



You can usepointer-eventsProperty to cancel the response to mouse events

pointer-events:none
Copy the code

Delayed tips

When the mouse moves quickly, the following effect will appear. Although the prompt information appears smoothly, the body sense is confused, and there may be rendering cost when the scene is complicated. Animation delay can be set to avoid the effects of fast mouse movement



useThe transition: 0.15 s to 0.15 sTo implement thetransition

Add focus

Sometimes the user will use the TAB key to switch between tools. In this case, if you want to have a prompt effect, you should set the style not only in hover, but also in focus.

Discussion groups

Welcome to add group discussion, visit our forum: www.yuque.com/kuwu/vgfxx6