Popover

Position

Valid values: top-center bottom-center left-center right-center top-left top-right bottom-left bottom-right left-top right-top left-bottom right-bottom

Use the specified value to modify the position of the popover at the top-center class position of this line.

<div class="popover">
  <label class="trigger btn solid" tabindex="0">click</label>
  <div class="content top-center" tabindex="0">
    <div class="arrow"></div>
    <div class="p-4 text-sm">Popover content.</div>
  </div>
</div>

Preview

Code

HTML

Code

JSX/TSX

<div class="grid grid-cols-4 gap-4 place-items-center">
	<div class="popover">
		<label class="trigger btn solid" tabindex="0">
			<p>Click</p>
		</label>
		<div class="content" tabindex="0">
			<div class="arrow" />
			<div class="p-4 text-sm">Popover content.</div>
		</div>
	</div>
	<div class="popover">
		<label class="trigger btn solid" tabindex="0">
			<p>bottom-center</p>
		</label>
		<div class="content bottom-center" tabindex="0">
			<div class="arrow" />
			<div class="p-4 text-sm">Popover content. With right place!</div>
		</div>
	</div>
	<div class="popover">
		<label class="trigger btn solid" tabindex="0">
			<p>bottom-left</p>
		</label>
		<div class="content bottom-left" tabindex="0">
			<div class="arrow" />
			<div class="p-4 text-sm">Popover content. With right place!</div>
		</div>
	</div>
	<div class="popover">
		<label class="trigger btn solid" tabindex="0">
			<p>bottom-right</p>
		</label>
		<div class="content bottom-right" tabindex="0">
			<div class="arrow" />
			<div class="p-4 text-sm">Popover content. With right place!</div>
		</div>
	</div>
	<div class="popover">
		<label class="trigger btn solid" tabindex="0">
			<p>top-center</p>
		</label>
		<div class="content top-center" tabindex="0">
			<div class="arrow" />
			<div class="p-4 text-sm">Popover content. With right place!</div>
		</div>
	</div>
	<div class="popover">
		<label class="trigger btn solid" tabindex="0">
			<p>top-left</p>
		</label>
		<div class="content top-left" tabindex="0">
			<div class="arrow" />
			<div class="p-4 text-sm">Popover content. With right place!</div>
		</div>
	</div>
	<div class="popover">
		<label class="trigger btn solid" tabindex="0">
			<p>top-right</p>
		</label>
		<div class="content top-right" tabindex="0">
			<div class="arrow" />
			<div class="p-4 text-sm">Popover content. With right place!</div>
		</div>
	</div>
	<div class="popover">
		<label class="trigger btn solid" tabindex="0">
			<p>left</p>
		</label>
		<div class="content left" tabindex="0">
			<div class="arrow" />
			<div class="p-4 text-sm">Popover content. With right place!</div>
		</div>
	</div>
	<div class="popover">
		<label class="trigger btn solid" tabindex="0">
			<p>left-top</p>
		</label>
		<div class="content left-top" tabindex="0">
			<div class="arrow" />
			<div class="p-4 text-sm">Popover content. With right place!</div>
		</div>
	</div>
	<div class="popover">
		<label class="trigger btn solid" tabindex="0">
			<p>left-bottom</p>
		</label>
		<div class="content left-bottom" tabindex="0">
			<div class="arrow" />
			<div class="p-4 text-sm">Popover content. With right place!</div>
		</div>
	</div>
	<div class="popover">
		<label class="trigger btn solid" tabindex="0">
			<p>right</p>
		</label>
		<div class="content right" tabindex="0">
			<div class="arrow" />
			<div class="p-4 text-sm">Popover content. With right place!</div>
		</div>
	</div>
	<div class="popover">
		<label class="trigger btn solid" tabindex="0">
			<p>right-top</p>
		</label>
		<div class="content right-top" tabindex="0">
			<div class="arrow" />
			<div class="p-4 text-sm">Popover content. With right place!</div>
		</div>
	</div>
	<div class="popover">
		<label class="trigger btn solid" tabindex="0">
			<p>right-bottom</p>
		</label>
		<div class="content right-bottom" tabindex="0">
			<div class="arrow" />
			<div class="p-4 text-sm">Popover content. With right place!</div>
		</div>
	</div>
</div>

<div className='grid grid-cols-4 gap-4 place-items-center'>
  <div className='popover'>
    <label className='trigger btn solid'
      tabIndex='0'>
      <p>
        Click
      </p>
    </label>
    <div className='content'
      tabIndex='0'>
      <div className='arrow' />
      <div className='p-4 text-sm'>
        Popover content.
      </div>
    </div>
  </div>
  <div className='popover'>
    <label className='trigger btn solid'
      tabIndex='0'>
      <p>
        bottom-center
      </p>
    </label>
    <div className='content bottom-center'
      tabIndex='0'>
      <div className='arrow' />
      <div className='p-4 text-sm'>
        Popover content. With right place!
      </div>
    </div>
  </div>
  <div className='popover'>
    <label className='trigger btn solid'
      tabIndex='0'>
      <p>
        bottom-left
      </p>
    </label>
    <div className='content bottom-left'
      tabIndex='0'>
      <div className='arrow' />
      <div className='p-4 text-sm'>
        Popover content. With right place!
      </div>
    </div>
  </div>
  <div className='popover'>
    <label className='trigger btn solid'
      tabIndex='0'>
      <p>
        bottom-right
      </p>
    </label>
    <div className='content bottom-right'
      tabIndex='0'>
      <div className='arrow' />
      <div className='p-4 text-sm'>
        Popover content. With right place!
      </div>
    </div>
  </div>
  <div className='popover'>
    <label className='trigger btn solid'
      tabIndex='0'>
      <p>
        top-center
      </p>
    </label>
    <div className='content top-center'
      tabIndex='0'>
      <div className='arrow' />
      <div className='p-4 text-sm'>
        Popover content. With right place!
      </div>
    </div>
  </div>
  <div className='popover'>
    <label className='trigger btn solid'
      tabIndex='0'>
      <p>
        top-left
      </p>
    </label>
    <div className='content top-left'
      tabIndex='0'>
      <div className='arrow' />
      <div className='p-4 text-sm'>
        Popover content. With right place!
      </div>
    </div>
  </div>
  <div className='popover'>
    <label className='trigger btn solid'
      tabIndex='0'>
      <p>
        top-right
      </p>
    </label>
    <div className='content top-right'
      tabIndex='0'>
      <div className='arrow' />
      <div className='p-4 text-sm'>
        Popover content. With right place!
      </div>
    </div>
  </div>
  <div className='popover'>
    <label className='trigger btn solid'
      tabIndex='0'>
      <p>
        left
      </p>
    </label>
    <div className='content left'
      tabIndex='0'>
      <div className='arrow' />
      <div className='p-4 text-sm'>
        Popover content. With right place!
      </div>
    </div>
  </div>
  <div className='popover'>
    <label className='trigger btn solid'
      tabIndex='0'>
      <p>
        left-top
      </p>
    </label>
    <div className='content left-top'
      tabIndex='0'>
      <div className='arrow' />
      <div className='p-4 text-sm'>
        Popover content. With right place!
      </div>
    </div>
  </div>
  <div className='popover'>
    <label className='trigger btn solid'
      tabIndex='0'>
      <p>
        left-bottom
      </p>
    </label>
    <div className='content left-bottom'
      tabIndex='0'>
      <div className='arrow' />
      <div className='p-4 text-sm'>
        Popover content. With right place!
      </div>
    </div>
  </div>
  <div className='popover'>
    <label className='trigger btn solid'
      tabIndex='0'>
      <p>
        right
      </p>
    </label>
    <div className='content right'
      tabIndex='0'>
      <div className='arrow' />
      <div className='p-4 text-sm'>
        Popover content. With right place!
      </div>
    </div>
  </div>
  <div className='popover'>
    <label className='trigger btn solid'
      tabIndex='0'>
      <p>
        right-top
      </p>
    </label>
    <div className='content right-top'
      tabIndex='0'>
      <div className='arrow' />
      <div className='p-4 text-sm'>
        Popover content. With right place!
      </div>
    </div>
  </div>
  <div className='popover'>
    <label className='trigger btn solid'
      tabIndex='0'>
      <p>
        right-bottom
      </p>
    </label>
    <div className='content right-bottom'
      tabIndex='0'>
      <div className='arrow' />
      <div className='p-4 text-sm'>
        Popover content. With right place!
      </div>
    </div>
  </div>
</div>

Force open

Apply open class on it to keep popover open.

Preview

Code

HTML

Code

JSX/TSX

<div class="popover open">
	<label class="trigger btn solid" tabindex="0">
		<p>force show</p>
	</label>
	<div class="content right-center" tabindex="0">
		<div class="arrow" />
		<div class="p-4 text-sm">Popover content.</div>
	</div>
</div>

<div className='popover open'>
  <label className='trigger btn solid'
    tabIndex='0'>
    <p>
      force show
    </p>
  </label>
  <div className='content right-center'
    tabIndex='0'>
    <div className='arrow' />
    <div className='p-4 text-sm'>
      Popover content.
    </div>
  </div>
</div>

Hover to show

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

Preview

Code

HTML

Code

JSX/TSX

<div class="popover hover-show">
	<label class="trigger btn solid" tabindex="0">
		<p>hover-show</p>
	</label>
	<div class="content top-center" tabindex="0">
		<div class="arrow" />
		<div class="p-4 text-sm">Popover content.</div>
	</div>
</div>

<div className='popover hover-show'>
  <label className='trigger btn solid'
    tabIndex='0'>
    <p>
      hover-show
    </p>
  </label>
  <div className='content top-center'
    tabIndex='0'>
    <div className='arrow' />
    <div className='p-4 text-sm'>
      Popover content.
    </div>
  </div>
</div>

Tooltip Progress