Tooltip Color Themes
Example
Dark Theme
Tooltip
Open
Light Theme
Tooltip
Open
<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>