编辑指南

`[data-tooltip] {

 position: relative;
 cursor: help;
 display: inline;
 text-decoration: none

} [data-tooltip]::before {

 content: attr(data-tooltip);
 position: absolute;
 bottom: calc(100% + 10px);
 left: 50%;
 transform: translateX(-50%);
 min-width: 80px;
 max-width: 800px;
 width: max-content;
 white-space: pre-line;
 word-wrap: break-word;
 overflow-wrap: break-word;
 background: #fff;
 color: #333;
 border: 1px solid #e0e0e0;
 border-radius: 6px;
 padding: 10px 14px;
 font-size: 14px;
 line-height: 1.5;
 box-shadow: 0 2px 8px rgba(0,0,0,.1);
 opacity: 0;
 visibility: hidden;
 z-index: 1000;
 transition: all .2s ease

} [data-tooltip]::after {

 content: ;
 position: absolute;
 bottom: 100%;
 left: 50%;
 transform: translateX(-50%);
 border: 6px solid transparent;
 border-top-color: #fff;
 opacity: 0;
 visibility: hidden;
 transition: all .2s ease

} [data-tooltip]:hover::after, [data-tooltip]:hover::before {

 opacity: 1;
 visibility: visible

} @media (max-width:768px) {

 [data-tooltip]::before {
   max-width: 250px;
   left: 0;
   transform: translateX(0)
 }

} `

完整使用示例!

1. 1. 简单提示

点击这里查看详情。

1. 2. 多行提示（用空格换行）

多行警告

1. 3. 带颜色的文字

- 红色重要 - 橙色注意 - 绿色完成 - 蓝色链接

1. 4. 加粗文字

- 重要术语**需要特别注意。

1. 5. 颜色+加粗

- 红色加粗警告**

1. 6. 特殊样式组合

 紫色大号加粗

1. 7. 列表中的提示

- **必填项** - 选填项 - 自动项