Tooltip

Give your content string to data-tooltip slot attribute to plant it.

Position

Use top bottom left right classes to control the position of tooltip.

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

Preview

Code

HTML

Code

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>

Force show

Apply show class on it to keep tooltip open.

Preview

Code

HTML

Code

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 to show

The default function way of tooltip component is hover, but you can apply click-show class on it to change this behavior.

Preview

Code

HTML

Code

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>

Tabs Popover