Tooltip

Small contextual bits of text on mouseover.

Basic Example

This is how a basic .toolTip looks like and how you write the markup:

<!-- example -->
<div class="br-all p-4 c-base-15 bg-base-25" yoi-tooltip="content:This is a tooltip;">Hover for tooltip</div>

Correct Formatting: If at least one value contains special characters (slashes, colons etc.), wrap all values in single quotation marks: foo:'some//value:with_special?charactes'; bar:'12'; foobar:'abc'.

Existing Dom Elements as Tooltips

By default, a tooltip is generated and injected into the dom. If you are interested in progressive enhancement and the content of the tooltip makes sense to display even if JavaScript is not executed, you can turn any existing element in the document into a tooltip. You need to reference it by id:

<!-- example -->
<!-- trigger element -->
<div class="br-all p-4 c-base-15 bg-base-25" yoi-tooltip="target:#tooltip-1;">Hover for tooltip</div>
<!-- tooltip -->
<div class="note m-b-2" id="tooltip-1">
    <div class="note__body">
        <p>This is a tooltip.</p>
    </div>
</div>

When JavaScript is disabled, the user sees a nicely styled note element. This is very flexible and gives you complete control over styling your no-JS fallback.

Change of Markup You can turn any markup you wish into a tooltip. However, the tooltip will only use the text and drop all other tags.

Smart Positioning Tooltips are displayed relative to the cursor position on mouseover and adjust themselves automatically so the viewport does not cut them off.

Parameters

Static Position

Set the parameter staticPosition to top, right, bottom, left to create a static tooltip with a pointer at the given position, relative to it’s trigger element:

<!-- example -->
<!-- trigger elements -->
<p class="p-t-2">
    <span class="br-all p-2 c-base-15 bg-base-24" yoi-tooltip="target:#tooltip-2; staticPosition:top;">top</span>
    <span class="br-all p-2 c-base-15 bg-base-24" yoi-tooltip="target:#tooltip-2; staticPosition:right;">right</span>
    <span class="br-all p-2 c-base-15 bg-base-24" yoi-tooltip="target:#tooltip-2; staticPosition:bottom;">bottom</span>
    <span class="br-all p-2 c-base-15 bg-base-24" yoi-tooltip="target:#tooltip-2; staticPosition:left;">left</span>
</p>
<!-- tooltip -->
<div id="tooltip-2">
    <p>I won’t move.</p>
</div>

showDelay

Set the parameter showDelay to any number of milliseconds (eg. showDelay:1000 = one second) to delay showing the tooltip:

<!-- example -->
<!-- trigger element -->
<div class="br-all p-4 c-base-15 bg-base-24" yoi-tooltip="target:#tooltip-3; showDelay:1000;">Hover for tooltip</div>
<!-- tooltip -->
<div id="tooltip-3">
    <p>This is a tooltip with 1 second show-delay.</p>
</div>

hideDelay

Set the parameter hideDealy to any number of milliseconds (eg. hideDelay:1000 = one second) to delay hiding the tooltip:

<!-- example -->
<!-- trigger element -->
<div class="br-all p-4 c-base-15 bg-base-24" yoi-tooltip="target:#tooltip-4; hideDelay:1000;">Hover for tooltip</div>
<!-- tooltip -->
<div id="tooltip-4">
    <p>This is a tooltip with 1 second hide-delay.</p>
</div>

Custom Events

Source Files

components/tooltip/