Branch: master
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
README.md
index.js
readme.styl
test.html
test.js

README.md

Tooltip

The Tooltip component creates a dynamically positioned pop-up tooltip filled with custom content that shows during the hover state of the corresponding trigger element.

Demo

%html%

<style nonce="%nonce%"> #tonic-tooltip-example-1 { cursor: default; } </style>
Example
Hover over this text

Code

The element that will be used to trigger the display of the tooltip must contain an id that matches the for attribute on the tonic-tooltip element.

HTML

<span id="tonic-tooltip-example">Hover over this text</span>

<tonic-tooltip for="tonic-tooltip-example">
  <img src="./tonic.svg" width="100px">
</tonic-tooltip>

Api

Properties

Property Type Description Default
for string Adds a for attribute. required
width string Changes the width style.
height string Changes height style.
theme string Adds a theme color (light, dark or whatever is defined in your base CSS. light

Instance Methods & Members

Method Description
show() Shows the tooltip.
hide() Hides the tooltip.