Floating prompts can provide users with help or guidance information in a relatively hidden way, and are displayed after the mouse is moved into the text content.
css code:
/* 浮漂提示框 */
[myth-tag]{
position: relative }
[myth-tag]:before, [myth-tag]:after{
z-index: 1;opacity: 0;position: absolute;pointer-events: none;transition: opacity .3s;}
/* 小箭头 */
[myth-tag]:before{
width: 0;height: 0;content: '';border: .5rem solid var(--border-color);}
[myth-tag~=top]:before{
bottom: 100%;border-top-color: rgba(0, 0, 0, .7);}
[myth-tag~=bottom]:before{
top: 100%;border-bottom-color: rgba(0, 0, 0, .7);}
[myth-tag~=top]:before, [myth-tag~=bottom]:before{
left: 50%;transform: translateX(-50%);}
[myth-tag=left]:before{
right: 100%;border-left-color: rgba(0, 0, 0, .7);}
[myth-tag=right]:before{
left: 100%;border-right-color: rgba(0, 0, 0, .7);}
[myth-tag=left]:before, [myth-tag=right]:before{
top: 50%;transform: translateY(-50%);}
/*文字 */
[myth-tag~=top]:after{
bottom: 100%;margin-bottom: 1rem;}
[myth-tag~=bottom]:after{
top: 100%;margin-top: 1rem;}
[myth-tag=top]:after, [myth-tag=bottom]:after{
left: 50%;transform: translateX(-50%);}
[myth-tag=left]:after{
right: 100%;margin-right: 1rem;}
[myth-tag=right]:after{
left: 100%;margin-left: 1rem;}
[myth-tag=left]:after, [myth-tag=right]:after{
top: 50%;transform: translateY(-50%);}
/* -- 组合对齐方式 */
[myth-tag~=left][myth-tag~=top]:after, [myth-tag~=left][myth-tag~=bottom]:after{
right: 0;min-width: 4em;}
[myth-tag~=right][myth-tag~=top]:after, [myth-tag~=right][myth-tag~=bottom]:after{
left: 0;min-width: 4em;}
[myth-text]:hover:before, [myth-text]:hover:after{
opacity: 1 }
[myth-text]:after{
color: #fff;font-size: .85rem;white-space: nowrap; border-radius: .5rem;padding: .25rem .5rem;content: attr(myth-text);background: rgba(0, 0, 0, .7);}
html calling code:
<span myth-tag="top" myth-text="我在上方显示">上方显示</span>
<span myth-tag="bottom" myth-text="我在底侧显示">底侧显示</span>
<span myth-tag="right" myth-text="我在右侧显示">右侧显示</span>
<span myth-tag="left" myth-text="我在左侧显示">左侧显示</span>
<span myth-tag="top left" myth-text="我在左上方显示（top left）">左上方显示</span>
<span myth-tag="bottom right" myth-text="我在右下方显示（bottom right）">右下方显示</span>
final effect
