CSS自学框架之漂浮提示（上方显示 底侧显示 右侧显示 左侧显示）

漂浮提示可以用较为隐藏的方式为用户提供帮助或引导信息，将鼠标移入文字内容后展示。
css代码：

/* 浮漂提示框 */
			[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调用代码：

<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>

最终效果