气泡提示

v2.0.6+

<button class="bny-btn" bny-tip="这是一个基础提示">鼠标悬停</button>
<span bny-tip="内联元素也支持">悬停我</span>
                

<p bny-tip="上方居中的提示气泡">顶部元素</p>

<p bny-tip="左侧对齐的气泡提示，当上方空间不足时会自动切换到下方">左区元素</p>

<p bny-tip="右侧对齐的提示，这是一段比较长的文本用来测试气泡的自动换行和最大宽度效果">右区元素（长文本）</p>

<p bny-tip="底部元素会自动向上弹出气泡">底部元素</p>
                

<input class="bny-input" bny-tip="请输入您的用户名" placeholder="聚焦我试试">

<button class="bny-btn" bny-tip="点击或聚焦均可触发提示">可聚焦按钮</button>
                

<button class="bny-btn" hx-get="/test/data/tooltip-demo.html"
    hx-target="#tooltip-dynamic" hx-swap="innerHTML">
    加载动态内容
</button>
<div id="tooltip-dynamic"></div>
                

<button class="bny-btn"
    bny-tip-html="<b>加粗标题</b><br><span style='color:var(--green)'>带颜色的描述文字</span>">
    HTML 内容提示
</button>
                

<button class="bny-btn" bny-tip="悬停 500ms 后才显示" data-tip-delay="500">延迟 500ms</button>
                

<button class="bny-btn" bny-tip="始终在右侧显示" data-tip-placement="right">右侧提示</button>

<button class="bny-btn" bny-tip="始终在下方左对齐" data-tip-placement="bottom-start">下方左对齐</button>
                

<button class="bny-btn" bny-tip="白色背景的气泡提示" data-tip-theme="light">亮色主题</button>

<button class="bny-btn" bny-tip="长文本..." data-tip-width="180px">窄宽度</button>