HTML文字悬浮

编写一层div

<div class="complaint2r">
 	XXX
  <span class="tooltip-construct">提示文字</span>
</div>

外部标签样式

.complaint2{
 
             position: relative;
            display: inline-block;
            cursor: pointer;
        }

悬浮文字样式

 .tooltip-construct {
            visibility: hidden;
            position: absolute;
            background-color: #333;
            color: white;
            padding: 5px;
            border-radius: 3px;
            z-index: 1;
            white-space: nowrap;
            top: 0; /* 调整位置 */
            left: -100%;
            transform: translateX(-50%);
            opacity: 0;
            transition: opacity 0.3s ease-in-out;
        }

中间hover样式连接

.complaint2:hover .tooltip-construct {
            visibility: visible;
            opacity: 1;
        }

提示词方位改变

      top: 0; /* 左边 */
      left: -100%;

	  top: 100%; /* 下边 */
        left: 50%;