carbon-components/html/tooltip/tooltip.html

Carbon Components is a component library for IBM Cloud

<div class="bx--tooltip__label" aria-describedby="unique-tooltip">
  Tooltip label
  <div tabindex="0" data-tooltip-trigger data-tooltip-target="#unique-tooltip" role="tooltip" class="bx--tooltip__trigger">
    <svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
      <g fill-rule="evenodd">
        <path d="M8 14.5a6.5 6.5 0 1 0 0-13 6.5 6.5 0 0 0 0 13zM8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16z" fill-rule="nonzero" />
        <path fill-rule="nonzero" d="M9 13H7V7h2z" />
        <circle cx="8" cy="4" r="1" />
      </g>
    </svg>
  </div>
</div>
<div id="unique-tooltip" data-floating-menu-direction="bottom" class="bx--tooltip" data-avoid-focus-on-open>
  <span class="bx--tooltip__caret"></span>
  <p>This is some tooltip text. This box shows the maximum amount of text that should appear inside. If more room is needed
    please use a modal instead.</p>
  <div>
    <a href="#" class="bx--link">Learn More</a>
    <button class="bx--btn bx--btn--primary" type="button">Create</button>
  </div>
</div>