2

Messages

Hadiyat Avatar Hadiyat Virgiawan You sent an attachment. 16 hours ago
John Low Avatar John Low Wait a sec.. 22 hours ago
Yong Tian Avatar Yong Tian How are you? 12 April
Andree Avatar Andree W Kindly check my work 08 April
Lisa Avatar Lisa Tan Please help me check this. 02 April
1

Notifications

Mark all as read
Today
MC Margo Corn has invited you to the project Untitled 2 min EH Elsa Hoffman removed you 1 hr
Yesterday
MP Nadya Pasutri mentioned you in a comment in the project Untitled 2 "Mike, we need to fix this asap" 14:12 KK Konstantin Konstantinovich removed you from Mobile Dolfin 12:03
25 Mar
NP Nadya Pasutri accepted your invitation the project Untitled 2 09:45 KK Siti accepted the invitation to the project Tablature 08:15
Home / User Interface / Components

Tooltips

A component to show a few extra content when hovering or focusing on element.

The tooltip component is similar to dropdowns and popovers. Because it also relies on TippyJS.

To simplify usage, we decided to separate the component from dropdowns and popovers.

Usage

An element with data-tooltip="Awesome tooltip!" is enough to make a tooltip.

Color Schemes

Apply the tooltip color scheme by passing the data-tippy-scheme attribute.

Placement

Almost any position is supported. That is why we chose TippyJS!

To set the placement, just pass the placement value to the data-tippy-placement attribute. It's as simple as that. See all the available placements here.

Trigger

Set the trigger by using the data-tippy-trigger. The default trigger value is mouseenter focus. All possible values are at Tippy Trigger Documentation.

HTML

Enable HTML tags by setting the data-tippy-allow-html attribute to true.

Initializing

You can use one of these two methods to initialize the tooltip instance.

Via Data Attributes

The easiest way to initialize the tooltip component is by using the data attributes. All the example of usage above have been using this method. If you haven't checked it out yet, just scroll back to the top.

All you need is an element that you want to place a tooltip on. Then, set data-tooltip with a tooltip content as the value of that attribute to the element.

Via Javascript

Initialize the tooltip component by calling the Tooltip.createInstance(element, options) function.
Function Description
Tooltip.createInstance(element, options) Create a Tooltip instance.
Tooltip.getInstance(element, options) If any, get the Tooltip instance.
Tooltip.getOrCreateInstance(element, options) Get the Tooltip instance if there is one. Create it if necessary.
Tooltip.destroyInstance(element) To destroy a Tooltip instance. Usually called before removing the element.
Tooltip.dataApi(wrapperElement) Execute the Data API within the specified wrapperElement.

API

Parameters

Most Skewind component constructors accept two parameters, as well as the Tooltip component.

Parameter Type Required Description
tooltipEl HTMLElement Required The tooltip element. You can use any HTMLElement.
options Object Required Pass the tippy options object.

Options

Since it uses TippyJS, you can see the available options from their documentation.

Methods

Each instance has these public methods.

Methods Return Description
dispose() void Alternative to Tooltip.destroyInstance. Just in case if you want to remove tooltip element, call this first.
TippyJS Methods mixed Call them through the tippy instance that lived in the instance public attribute. instance.tippy.show()

Events

This event may be emitted for hooking into tooltip functionality.

Event Description
TippyJS Events If you want to listen to the TippyJS event, pass it to the options instead.