文字提示

将内容字符串赋予 data-tooltip 槽属性以填充它。

Position

使用 top bottom left right 类名来控制组件位置.

<span class="tooltip bw top" data-tooltip="hello">
  <button class="btn solid">top</button>
</span>

演示

代码

HTML

代码

JSX/TSX

<div class="grid grid-cols-4 gap-4 place-items-center">
	<span class="tooltip bw top" data-tooltip="hello">
		<button class="btn solid">top</button>
	</span>
	<span class="tooltip success bottom" data-tooltip="hello">
		<button class="btn solid">bottom</button>
	</span>
	<span class="tooltip warn left" data-tooltip="hello">
		<button class="btn solid">left</button>
	</span>
	<span class="tooltip danger right" data-tooltip="hello">
		<button class="btn solid">right</button>
	</span>
</div>

<div className='grid grid-cols-4 gap-4 place-items-center'>
  <span className='tooltip bw top'
    data-tooltip='hello'>
    <button className='btn solid'>
      top
    </button>
  </span>
  <span className='tooltip success bottom'
    data-tooltip='hello'>
    <button className='btn solid'>
      bottom
    </button>
  </span>
  <span className='tooltip warn left'
    data-tooltip='hello'>
    <button className='btn solid'>
      left
    </button>
  </span>
  <span className='tooltip danger right'
    data-tooltip='hello'>
    <button className='btn solid'>
      right
    </button>
  </span>
</div>

强制显示

使用 show 类名来强制显示提示.

演示

代码

HTML

代码

JSX/TSX

<span class="tooltip bw right show" data-tooltip="hello">
	<button class="btn solid">force show</button>
</span>

<span className='tooltip bw right show'
  data-tooltip='hello'>
  <button className='btn solid'>
    force show
  </button>
</span>

点击显示

文字提示组件的默认激活显示的方式是悬停，但您可以在其上添加 click-show 类来更改此行为。

演示

代码

HTML

代码

JSX/TSX

<span class="tooltip bw top click-show" data-tooltip="hello">
	<button class="btn solid">click-show</button>
</span>

<span className='tooltip bw top click-show'
  data-tooltip='hello'>
  <button className='btn solid'>
    click-show
  </button>
</span>

标签悬浮层