Canon Styleguide

Tooltip Color Themes

Example

Dark Theme

Tooltip

Light Theme

Tooltip

<div class="canon-tooltip" data-tippy-theme="dark" data-tippy-placement="auto" tabindex="0">
  <div class="tooltip__open-btn" role="button">
    <svg width="14" height="14" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M7 13.5a6.5 6.5 0 100-13 6.5 6.5 0 000 13z" stroke="currentColor" />
      <path d="M6.76 7.416h.408l.08-.864c.912-.128 1.664-.624 1.664-1.624v-.016C8.912 4 8.2 3.328 7.12 3.328c-.856 0-1.424.376-1.88.928l.408.392c.408-.472.864-.752 1.456-.752.72 0 1.168.464 1.168 1.04v.016c0 .672-.552 1.104-1.592 1.128l-.04.04.12 1.296zM6.592 9h.736v-.84h-.736V9z" fill="currentColor" />
    </svg>
    <span class="canon-visually-hidden">Open</span>
  </div>

  <div class="canon-tooltip__content">
    <div class="canon-tooltip__close-btn" role="button">
      <svg xmlns="http://www.w3.org/2000/svg" width="10.064" height="10.064" viewBox="0 0 10.064 10.064">
        <g transform="translate(-444.968 -491.968)">
          <line y1="9.003" x2="9.003" transform="translate(445.498 492.498)" stroke-width="1.5" />
          <line x2="9.003" y2="9.003" transform="translate(445.498 492.498)" stroke-width="1.5" />
        </g>
      </svg>
      <span class="canon-visually-hidden">Close</span>
    </div>

    <h3 class="canon-paragraph--big-alt-2">Test</h3>
    <p class="canon-paragraph--small">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. A architecto aspernatur autem blanditiis
      <a target="_blank" href="//google.com">Link</a>
    </p>
  </div>
</div>

<div class="canon-tooltip" data-tippy-theme="light" data-tippy-placement="auto" tabindex="0">
  <div class="tooltip__open-btn" role="button">
    <svg width="14" height="14" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M7 13.5a6.5 6.5 0 100-13 6.5 6.5 0 000 13z" stroke="currentColor" />
      <path d="M6.76 7.416h.408l.08-.864c.912-.128 1.664-.624 1.664-1.624v-.016C8.912 4 8.2 3.328 7.12 3.328c-.856 0-1.424.376-1.88.928l.408.392c.408-.472.864-.752 1.456-.752.72 0 1.168.464 1.168 1.04v.016c0 .672-.552 1.104-1.592 1.128l-.04.04.12 1.296zM6.592 9h.736v-.84h-.736V9z" fill="currentColor" />
    </svg>
    <span class="canon-visually-hidden">Open</span>
  </div>

  <div class="canon-tooltip__content">
    <div class="canon-tooltip__close-btn" role="button">
      <svg xmlns="http://www.w3.org/2000/svg" width="10.064" height="10.064" viewBox="0 0 10.064 10.064">
        <g transform="translate(-444.968 -491.968)">
          <line y1="9.003" x2="9.003" transform="translate(445.498 492.498)" stroke-width="1.5" />
          <line x2="9.003" y2="9.003" transform="translate(445.498 492.498)" stroke-width="1.5" />
        </g>
      </svg>
      <span class="canon-visually-hidden">Close</span>
    </div>

    <h3 class="canon-paragraph--big-alt-2">Test</h3>
    <p class="canon-paragraph--small">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. A architecto aspernatur autem blanditiis
      <a target="_blank" href="//google.com">Link</a>
    </p>
  </div>
</div>

Tooltips Placement

You can position tooltip with below options. Simply add it to the data-tippy-placement attrubute.

Example

top-start

Open
top-end

Open
right

Open
right-start

Open
right-end

Open
bottom

Open
bottom-start

Open

bottom-end

Open
left

Open
left-start

Open
left-end

Open
auto

Open
auto-start

Open
auto-end

Open

<div class="canon-tooltip" data-tippy-theme="dark" data-tippy-placement="bottom" tabindex="0">
  <div class="tooltip__open-btn" role="button">
    <svg width="14" height="14" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M7 13.5a6.5 6.5 0 100-13 6.5 6.5 0 000 13z" stroke="currentColor" />
      <path d="M6.76 7.416h.408l.08-.864c.912-.128 1.664-.624 1.664-1.624v-.016C8.912 4 8.2 3.328 7.12 3.328c-.856 0-1.424.376-1.88.928l.408.392c.408-.472.864-.752 1.456-.752.72 0 1.168.464 1.168 1.04v.016c0 .672-.552 1.104-1.592 1.128l-.04.04.12 1.296zM6.592 9h.736v-.84h-.736V9z" fill="currentColor" />
    </svg>
    <span class="canon-visually-hidden">Open</span>
  </div>

  <div class="canon-tooltip__content">
    <div class="canon-tooltip__close-btn" role="button">
      <svg xmlns="http://www.w3.org/2000/svg" width="10.064" height="10.064" viewBox="0 0 10.064 10.064">
        <g transform="translate(-444.968 -491.968)">
          <line y1="9.003" x2="9.003" transform="translate(445.498 492.498)" stroke-width="1.5" />
          <line x2="9.003" y2="9.003" transform="translate(445.498 492.498)" stroke-width="1.5" />
        </g>
      </svg>
      <span class="canon-visually-hidden">Close</span>
    </div>

    <h3 class="canon-paragraph--big-alt-2">Test</h3>
    <p class="canon-paragraph--small">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. A architecto aspernatur autem blanditiis
      <a target="_blank" href="//google.com">Link</a>
    </p>
  </div>
</div>