Tooltips

Used to help the user understand the meaning or function of an element.

Tooltip Base

Placement: top

HTML

<span data-tippy-content="This is a Tooltip" data-tippy-theme="green" data-tippy-placement="top">
  <i class="fa-regular fa-circle-question text-teal"></i>
</span>

Placement: top start

HTML

<span data-tippy-content="This is a Tooltip" data-tippy-theme="green" data-tippy-placement="top-start">
  <i class="fa-regular fa-circle-question text-teal"></i>
</span>

Placement: top end

HTML

<span data-tippy-content="This is a Tooltip" data-tippy-theme="green" data-tippy-placement="top-end">
  <i class="fa-regular fa-circle-question text-teal"></i>
</span>

Placement: bottom

HTML

<span data-tippy-content="This is a Tooltip" data-tippy-theme="green" data-tippy-placement="bottom">
  <i class="fa-regular fa-circle-question text-teal"></i>
</span>

Placement: bottom start

HTML

<span data-tippy-content="This is a Tooltip" data-tippy-theme="green" data-tippy-placement="bottom">
  <i class="fa-regular fa-circle-question text-teal"></i>
</span>

Placement: bottom end

HTML

<span data-tippy-content="This is a Tooltip" data-tippy-theme="green" data-tippy-placement="bottom">
  <i class="fa-regular fa-circle-question text-teal"></i>
</span>

Placement: right

HTML

<span data-tippy-content="This is a Tooltip" data-tippy-theme="green" data-tippy-placement="right">
  <i class="fa-regular fa-circle-question text-teal"></i>
</span>

Placement: left

HTML

<span data-tippy-content="This is a Tooltip" data-tippy-theme="green" data-tippy-placement="left">
  <i class="fa-regular fa-circle-question text-teal"></i>
</span>

Tooltip green with supporting text

Placement: top

HTML

<span data-template="tooltip-top-support-text" data-tippy-theme="green" data-tippy-placement="top">
    <i class="fa-regular fa-circle-question text-teal"></i>
  </span>
  <div id="tooltip-top-support-text" class="tooltip-content">
  <p><strong>This is a Tooltip</strong></p>
  <p>
    Tooltips are used to describe or identify an element. They help the user understand the meaning or function of an element.
  </p>
</div>

Placement: top start

HTML

<span data-template="tooltip-top-start-support-text" data-tippy-theme="green" data-tippy-placement="top-start">
    <i class="fa-regular fa-circle-question text-teal"></i>
  </span>
  <div id="tooltip-top-start-support-text" class="tooltip-content">
  <p><strong>This is a Tooltip</strong></p>
  <p>
    Tooltips are used to describe or identify an element. They help the user understand the meaning or function of an element.
  </p>
</div>

Placement: top end

HTML

<span data-template="tooltip-top-end-support-text" data-tippy-theme="green" data-tippy-placement="top-end">
    <i class="fa-regular fa-circle-question text-teal"></i>
  </span>
  <div id="tooltip-top-end-support-text" class="tooltip-content">
  <p><strong>This is a Tooltip</strong></p>
  <p>
    Tooltips are used to describe or identify an element. They help the user understand the meaning or function of an element.
  </p>
</div>

Placement: bottom

HTML

<span data-template="tooltip-bottom-support-text" data-tippy-theme="green" data-tippy-placement="bottom">
    <i class="fa-regular fa-circle-question text-teal"></i>
  </span>
  <div id="tooltip-bottom-support-text" class="tooltip-content">
  <p><strong>This is a Tooltip</strong></p>
  <p>
    Tooltips are used to describe or identify an element. They help the user understand the meaning or function of an element.
  </p>
</div>

Placement: bottom start

HTML

<span data-template="tooltip-bottom-start-support-text" data-tippy-theme="green" data-tippy-placement="bottom-start">
    <i class="fa-regular fa-circle-question text-teal"></i>
  </span>
  <div id="tooltip-bottom-start-support-text" class="tooltip-content">
  <p><strong>This is a Tooltip</strong></p>
  <p>
    Tooltips are used to describe or identify an element. They help the user understand the meaning or function of an element.
  </p>
</div>

Placement: bottom end

HTML

<span data-template="tooltip-bottom-end-support-text" data-tippy-theme="green" data-tippy-placement="bottom-end">
    <i class="fa-regular fa-circle-question text-teal"></i>
  </span>
  <div id="tooltip-bottom-end-support-text" class="tooltip-content">
  <p><strong>This is a Tooltip</strong></p>
  <p>
    Tooltips are used to describe or identify an element. They help the user understand the meaning or function of an element.
  </p>
</div>

Placement: right

HTML

<span data-template="tooltip-right-support-text" data-tippy-theme="green" data-tippy-placement="right">
  <i class="fa-regular fa-circle-question text-teal"></i>
</span>
<div id="tooltip-right-support-text" class="tooltip-content">
  <p><strong>This is a Tooltip</strong></p>
  <p>
    Tooltips are used to describe or identify an element. They help the user understand the meaning or function of an element.
  </p>
</div>

Placement: left

HTML

<span data-template="tooltip-left-support-text" data-tippy-theme="green" data-tippy-placement="left">
  <i class="fa-regular fa-circle-question text-teal"></i>
</span>
<div id="tooltip-left-support-text" class="tooltip-content">
  <p><strong>This is a Tooltip</strong></p>
  <p>
    Tooltips are used to describe or identify an element. They help the user understand the meaning or function of an element.
  </p>
</div>

Tooltip Base. Theme: black

Placement: top

HTML

<span data-tippy-content="This is a Tooltip" data-tippy-theme="black" data-tippy-placement="top">
  <i class="fa-regular fa-circle-question text-teal"></i>
</span>

Placement: top start

HTML

<span data-tippy-content="This is a Tooltip" data-tippy-theme="black" data-tippy-placement="top-start">
  <i class="fa-regular fa-circle-question text-teal"></i>
</span>

Placement: top end

HTML

<span data-tippy-content="This is a Tooltip" data-tippy-theme="black" data-tippy-placement="top-end">
  <i class="fa-regular fa-circle-question text-teal"></i>
</span>

Placement: bottom

HTML

<span data-tippy-content="This is a Tooltip" data-tippy-theme="black" data-tippy-placement="bottom">
  <i class="fa-regular fa-circle-question text-teal"></i>
</span>

Placement: bottom start

HTML

<span data-tippy-content="This is a Tooltip" data-tippy-theme="black" data-tippy-placement="bottom">
  <i class="fa-regular fa-circle-question text-teal"></i>
</span>

Placement: bottom end

HTML

<span data-tippy-content="This is a Tooltip" data-tippy-theme="black" data-tippy-placement="bottom">
  <i class="fa-regular fa-circle-question text-teal"></i>
</span>

Placement: right

HTML

<span data-tippy-content="This is a Tooltip" data-tippy-theme="black" data-tippy-placement="right">
  <i class="fa-regular fa-circle-question text-teal"></i>
</span>

Placement: left

HTML

<span data-tippy-content="This is a Tooltip" data-tippy-theme="black" data-tippy-placement="left">
  <i class="fa-regular fa-circle-question text-teal"></i>
</span>

Tooltip black with supporting text

Placement: top

HTML

<span data-template="tooltip-top-black-support-text" data-tippy-theme="black" data-tippy-placement="top">
    <i class="fa-regular fa-circle-question text-teal"></i>
  </span>
  <div id="tooltip-top-black-support-text" class="tooltip-content">
  <p><strong>This is a Tooltip</strong></p>
  <p>
    Tooltips are used to describe or identify an element. They help the user understand the meaning or function of an element.
  </p>
</div>

Placement: top start

HTML

<span data-template="tooltip-top-start-black-support-text" data-tippy-theme="black" data-tippy-placement="top-start">
    <i class="fa-regular fa-circle-question text-teal"></i>
  </span>
  <div id="tooltip-top-start-black-support-text" class="tooltip-content">
  <p><strong>This is a Tooltip</strong></p>
  <p>
    Tooltips are used to describe or identify an element. They help the user understand the meaning or function of an element.
  </p>
</div>

Placement: top end

HTML

<span data-template="tooltip-top-end-black-support-text" data-tippy-theme="black" data-tippy-placement="top-end">
    <i class="fa-regular fa-circle-question text-teal"></i>
  </span>
  <div id="tooltip-top-end-black-support-text" class="tooltip-content">
  <p><strong>This is a Tooltip</strong></p>
  <p>
    Tooltips are used to describe or identify an element. They help the user understand the meaning or function of an element.
  </p>
</div>

Placement: bottom

HTML

<span data-template="tooltip-bottom-black-support-text" data-tippy-theme="black" data-tippy-placement="bottom">
    <i class="fa-regular fa-circle-question text-teal"></i>
  </span>
  <div id="tooltip-bottom-black-support-text" class="tooltip-content">
  <p><strong>This is a Tooltip</strong></p>
  <p>
    Tooltips are used to describe or identify an element. They help the user understand the meaning or function of an element.
  </p>
</div>

Placement: bottom start

HTML

<span data-template="tooltip-bottom-start-black-support-text" data-tippy-theme="black" data-tippy-placement="bottom-start">
    <i class="fa-regular fa-circle-question text-teal"></i>
  </span>
  <div id="tooltip-bottom-start-black-support-text" class="tooltip-content">
  <p><strong>This is a Tooltip</strong></p>
  <p>
    Tooltips are used to describe or identify an element. They help the user understand the meaning or function of an element.
  </p>
</div>

Placement: bottom end

HTML

<span data-template="tooltip-bottom-end-black-support-text" data-tippy-theme="black" data-tippy-placement="bottom-end">
    <i class="fa-regular fa-circle-question text-teal"></i>
  </span>
  <div id="tooltip-bottom-end-black-support-text" class="tooltip-content">
  <p><strong>This is a Tooltip</strong></p>
  <p>
    Tooltips are used to describe or identify an element. They help the user understand the meaning or function of an element.
  </p>
</div>

Placement: right

HTML

<span data-template="tooltip-right-black-support-text" data-tippy-theme="black" data-tippy-placement="right">
  <i class="fa-regular fa-circle-question text-teal"></i>
</span>
<div id="tooltip-right-black-support-text" class="tooltip-content">
  <p><strong>This is a Tooltip</strong></p>
  <p>
    Tooltips are used to describe or identify an element. They help the user understand the meaning or function of an element.
  </p>
</div>

Placement: left

HTML

<span data-template="tooltip-left-black-support-text" data-tippy-theme="black" data-tippy-placement="left">
  <i class="fa-regular fa-circle-question text-teal"></i>
</span>
<div id="tooltip-left-black-support-text" class="tooltip-content">
  <p><strong>This is a Tooltip</strong></p>
  <p>
    Tooltips are used to describe or identify an element. They help the user understand the meaning or function of an element.
  </p>
</div>

Tooltip Base. Theme: white

Placement: top

HTML

<span data-tippy-content="This is a Tooltip" data-tippy-theme="white" data-tippy-placement="top">
  <i class="fa-regular fa-circle-question text-teal"></i>
</span>

Placement: top start

HTML

<span data-tippy-content="This is a Tooltip" data-tippy-theme="white" data-tippy-placement="top-start">
  <i class="fa-regular fa-circle-question text-teal"></i>
</span>

Placement: top end

HTML

<span data-tippy-content="This is a Tooltip" data-tippy-theme="white" data-tippy-placement="top-end">
  <i class="fa-regular fa-circle-question text-teal"></i>
</span>

Placement: bottom

HTML

<span data-tippy-content="This is a Tooltip" data-tippy-theme="white" data-tippy-placement="bottom">
  <i class="fa-regular fa-circle-question text-teal"></i>
</span>

Placement: bottom start

HTML

<span data-tippy-content="This is a Tooltip" data-tippy-theme="white" data-tippy-placement="bottom">
  <i class="fa-regular fa-circle-question text-teal"></i>
</span>

Placement: bottom end

HTML

<span data-tippy-content="This is a Tooltip" data-tippy-theme="white" data-tippy-placement="bottom">
  <i class="fa-regular fa-circle-question text-teal"></i>
</span>

Placement: right

HTML

<span data-tippy-content="This is a Tooltip" data-tippy-theme="white" data-tippy-placement="right">
  <i class="fa-regular fa-circle-question text-teal"></i>
</span>

Placement: left

HTML

<span data-tippy-content="This is a Tooltip" data-tippy-theme="white" data-tippy-placement="left">
  <i class="fa-regular fa-circle-question text-teal"></i>
</span>

Tooltip white with supporting text

Placement: top

HTML

<span data-template="tooltip-top-white-support-text" data-tippy-theme="white" data-tippy-placement="top">
    <i class="fa-regular fa-circle-question text-teal"></i>
  </span>
  <div id="tooltip-top-white-support-text" class="tooltip-content">
  <p><strong>This is a Tooltip</strong></p>
  <p>
    Tooltips are used to describe or identify an element. They help the user understand the meaning or function of an element.
  </p>
</div>

Placement: top start

HTML

<span data-template="tooltip-top-start-white-support-text" data-tippy-theme="white" data-tippy-placement="top-start">
    <i class="fa-regular fa-circle-question text-teal"></i>
  </span>
  <div id="tooltip-top-start-white-support-text" class="tooltip-content">
  <p><strong>This is a Tooltip</strong></p>
  <p>
    Tooltips are used to describe or identify an element. They help the user understand the meaning or function of an element.
  </p>
</div>

Placement: top end

HTML

<span data-template="tooltip-top-end-white-support-text" data-tippy-theme="white" data-tippy-placement="top-end">
    <i class="fa-regular fa-circle-question text-teal"></i>
  </span>
  <div id="tooltip-top-end-white-support-text" class="tooltip-content">
  <p><strong>This is a Tooltip</strong></p>
  <p>
    Tooltips are used to describe or identify an element. They help the user understand the meaning or function of an element.
  </p>
</div>

Placement: bottom

HTML

<span data-template="tooltip-bottom-white-support-text" data-tippy-theme="white" data-tippy-placement="bottom">
    <i class="fa-regular fa-circle-question text-teal"></i>
  </span>
  <div id="tooltip-bottom-white-support-text" class="tooltip-content">
  <p><strong>This is a Tooltip</strong></p>
  <p>
    Tooltips are used to describe or identify an element. They help the user understand the meaning or function of an element.
  </p>
</div>

Placement: bottom start

HTML

<span data-template="tooltip-bottom-start-white-support-text" data-tippy-theme="white" data-tippy-placement="bottom-start">
    <i class="fa-regular fa-circle-question text-teal"></i>
  </span>
  <div id="tooltip-bottom-start-white-support-text" class="tooltip-content">
  <p><strong>This is a Tooltip</strong></p>
  <p>
    Tooltips are used to describe or identify an element. They help the user understand the meaning or function of an element.
  </p>
</div>

Placement: bottom end

HTML

<span data-template="tooltip-bottom-end-white-support-text" data-tippy-theme="white" data-tippy-placement="bottom-end">
    <i class="fa-regular fa-circle-question text-teal"></i>
  </span>
  <div id="tooltip-bottom-end-white-support-text" class="tooltip-content">
  <p><strong>This is a Tooltip</strong></p>
  <p>
    Tooltips are used to describe or identify an element. They help the user understand the meaning or function of an element.
  </p>
</div>

Placement: right

HTML

<span data-template="tooltip-right-white-support-text" data-tippy-theme="white" data-tippy-placement="right">
  <i class="fa-regular fa-circle-question text-teal"></i>
</span>
<div id="tooltip-right-white-support-text" class="tooltip-content">
  <p><strong>This is a Tooltip</strong></p>
  <p>
    Tooltips are used to describe or identify an element. They help the user understand the meaning or function of an element.
  </p>
</div>

Placement: left

HTML

<span data-template="tooltip-left-white-support-text" data-tippy-theme="white" data-tippy-placement="left">
  <i class="fa-regular fa-circle-question text-teal"></i>
</span>
<div id="tooltip-left-white-support-text" class="tooltip-content">
  <p><strong>This is a Tooltip</strong></p>
  <p>
    Tooltips are used to describe or identify an element. They help the user understand the meaning or function of an element.
  </p>
</div>