The effect is as follows :

The code is as follows :
/** use data-tip To achieve title The effect of */ // Get the tag through the property selector , Plus relative positioning [data-tip] { position:
relative; display: inline-block; } // Set the style of pseudo class uniformly [data-tip]::before, [data-tip]::
after{ position: absolute; visibility: visible; opacity: 0; z-index: 20200618;
pointer-events: none; transition: .2s; } // Separate settings before, Set small triangle [data-tip]::
before{ content: ''; // adopt border To set the triangle border: 5px solid transparent; //
Use this to set the direction of the right angle of the triangle border-top-color: rgba(0,0,0,.6); -webkit-transform: translateX
(-50%); transform: translateX(-50%); bottom: 100%; left: 50%; margin-bottom: -5
px; } // Set font and background [data-tip]::after { // adopt attr Here's the font content: attr(data-tip);
background: rgba(0,0,0,.7); font: 12px Microsoft YaHei; color: #fff; padding: 4
px8px; border-radius: 2px; box-shadow: 3px 3px 6px rgba(0, 0, 0, .3); bottom:
100%; width: 100%; white-space: pre-wrap; left: 50%; transform: translateX(-50%)
; margin-bottom: 5px; } // hover Show when [data-tip]:hover::before, [data-tip]:hover
::after { visibility: visible; opacity: 1; -webkit-transition-delay: .15s;
transition-delay: .15s; } // When data-tip Hide when there is no content [data-tip=""]::before, [data-
tip=""]::after { display: none !important; }
usage method : use data-tip=“xxxxxx”, In other words, custom attributes are used to implement styles . be careful : If the parent or itself exists overflow:
hidden In this case , This style will not work . The reasons are as follows : because overflower:hidden, All the excess will be abnormal .
In fact, pseudo elements are used as elements , All pseudo elements are used before or after the element, and anything is hidden
If you want to achieve the above effect , Then use it js The length of the intercepted string , And splicing …… To achieve

©2019-2020 Toolsou All rights reserved,
It's unexpected Python Cherry tree (turtle The gorgeous style of Library )Unity3D of UGUI Basics -- Three modes of canvas os Simple use of module computer network --- Basic concepts of computer network ( agreement , system )html Writing about cherry trees , Writing about cherry trees Some East 14 Pay change 16 salary , Sincerity or routine ?Unity-Demo Examples ✨ realization UI- Backpack equipment drag function 06【 Interpretation according to the frame 】 Data range filtering -- awesome java Four functional interfaces ( a key , simple )