CSS3 Tips是一个仅使用 CSS3 制作的插件,使用HTML5中的参数。
功能[]
- 参数简单,使用 HTML5 即可。
- 含有四个可能的方向
- 现代风格。
- 无需 JavaScript 。
- 由 CSS 控制。
安装[]
语法[]
<span class="top-tip" data-tips="提示文本">文本</span>
参数[]
选项 (HTML 属性) | 描述 | 可能的值 |
---|---|---|
class
|
CSS 类别,确定了提示的方向。 | top-tip left-tip bottom-tip right-tip
|
data-tips
|
确定了提示的内容。 |
测试[]
- 将鼠标悬停在它们上以查看提示位置。
顶部提示
右部提示
左部提示
底部提示
Alternative Stylesheet Demo[]
Click the following button to open a modal and preview the alternative tooltips' appearance.
参阅[]
- TippingOver —— 类似于 Tooltips.js 的拓展。
- Tooltips - 具有高级配置的工具提示插件。
- WdsTooltips - 适用于移动设备和桌面设备的工具提示。