carbon-components/html/tooltip/tooltip.html

<!--
  Copyright IBM Corp. 2016, 2018

  This source code is licensed under the Apache-2.0 license found in the
  LICENSE file in the root directory of this source tree.
-->

<div id="tooltip-label" class="bx--tooltip__label" aria-describedby="unique-tooltip">
  Tooltip label
  <div tabindex="0" aria-labelledby="tooltip-label" 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 class="bx--tooltip__footer">
    <a href="#" class="bx--link">Learn More</a>
    <button class="bx--btn bx--btn--primary bx--btn--sm"
      type="button">Create</button>
  </div>
</div>