---
title: Tooltip
desc: Small pop-up element that provides additional information when users hover or focus on an element.
ico: mdi:tooltip
keywords:
  - notification
  - popover

props:
  - class: .prs-tooltip
    type: component
    desc: For actionable item, use [data-tip="BLAH"] to house the tooltip content
  - class: .prs-tooltip-content
    type: component
    desc: Optional content container, use if you need to embed HTML

alert:
  ico: mdi:alert
  body: |
    **Note:**  
    This is a pure CSS alternative to something like [Tippy.js](https://atomiks.github.io/tippyjs/). We HIGHLY recommend you use a proper positioning library so the tooltip never appears outside the viewport. Sadly, vanilla CSS cannot do this... _YET!_

controls:
  - name: text
    type: text
    label: Text
    desc: As always, keep it simple.
    default: Tooltip

  - name: position
    type: radio
    label: Position
    desc: Tooltip position.
    default: top
    options:
      - top
      - bottom
      - left
      - right

  - name: open
    type: toggle
    label: Open
    desc: Test open/close animation with built-in reduce motion. Notice how the animation changes bases on the position.
    default: false

  - name: embed
    type: toggle
    label: Embed HTML
    desc: Embed fancy HTML.
    default: false

preview: |
  <div
    class="prs-tooltip"
    :class="{
      'prs-tooltip-open': open,
      'prs-tooltip-bottom': position === 'bottom',
      'prs-tooltip-left': position === 'left',
      'prs-tooltip-right': position === 'right',
    }"
    :data-tip="text ? text : 'Tooltip'"
  >
    <div x-show="embed" class="prs-tooltip-content">
      <div class="animate-bounce text-(--prs-c-warning) -rotate-6 text-base font-black">Fancy</div>
    </div>
    <button class="prs-btn prs-btn-secondary" :disabled="open">
      <span x-text="position" class="capitalize"></span>
    </button>
  </div>
  <p x-show="!open" x-transition class="kbd kbd-sm font-semibold absolute top-1 left-1 pointer-events-none select-none">Hover / Focus</p>

code:
  html: |
    <div class="prs-tooltip{position}{open}"{embedded}>
      {embed}<button class=\"prs-btn prs-btn-secondary\">Action</button>
    </div>
  logic:
    text: "this.text"
    position: "this.position !== 'top' ? (' prs-tooltip-'+ this.position) : ''"
    open: "this.open ? ' prs-tooltip-open' : ''"
    embed: "this.embed ? '<div class=\"prs-tooltip-content\">\\n    <div>Fancy stuff goes here</div>\\n  </div>\\n  ' : ''"
    embedded: "this.embed ? '' : (' data-tip=\"'+ this.text +'\"')"
---