Skip to content

Latest commit

 

History

History
425 lines (371 loc) · 14.6 KB

tooltip.md

File metadata and controls

425 lines (371 loc) · 14.6 KB
Raw

Tooltip

Tooltips are useful for conveying information when an user hovers over an element.{.lead}

Example

Wrap both the tooltip's trigger element (such as an <i-button>) and the <template slot="body"> inside a <i-tooltip> component.

Tooltip Tooltip 
<i-tooltip>
    <i-button>Tooltip</i-button>
    <template slot="body">Tooltip</template>
</i-tooltip>

Placement

Trigger tooltips at the top, bottom, left or right of elements by adding the placement property to the <i-tooltip> element.

Each of the positions also has a -start or -end variant (top-start, top-end, bottom-start, bottom-end, etc.) that sets the tooltip to the start or end of the placement instead of centering it.

Top Tooltip Tooltip   Bottom Tooltip Tooltip   Left Tooltip Tooltip   Right Tooltip Tooltip 
<i-tooltip placement="top">
    <i-button>Top Tooltip</i-button>
    <template slot="body">Tooltip</template>
</i-tooltip>
<i-tooltip placement="bottom">
    <i-button>Bottom Tooltip</i-button>
    <template slot="body">Tooltip</template>
</i-tooltip>
<i-tooltip placement="left">
    <i-button>Left Tooltip</i-button>
    <template slot="body">Tooltip</template>
</i-tooltip>
<i-tooltip placement="right">
    <i-button>Right Tooltip</i-button>
    <template slot="body">Tooltip</template>
</i-tooltip>

Freeform

Tooltips can contain text of virtually any size. You can control the wrapping and the maximum width of the tooltip by setting white-space: normal and a fixed width property on the tooltip content.

Normal Tooltip This is a freeform tooltip with a long text. Its width is not controlled.   Fixed Width Tooltip
This is a freeform tooltip with a long text. Its width is controlled. 
<i-tooltip>
    <i-button>Normal Tooltip</i-button>
    <template slot="body">
        This is a <strong>freeform tooltip</strong> with a <u>long text</u>. Its width is not controlled.
    </template>
</i-tooltip>
<i-tooltip>
    <i-button>Fixed Width Tooltip</i-button>
    <div style="white-space: normal; width: 240px" slot="body">
        This is a <strong>freeform tooltip</strong> with a <u>long text</u>. Its width is controlled.
    </div>
</i-tooltip>

Trigger Type

You can use the trigger property to trigger the tooltip on hover or click. By default, tooltips are triggered on hover, a design decision made to improve user experience.

Click Tooltip Tooltip   Hover Tooltip Tooltip   Focus Tooltip Tooltip   Multiple Events Tooltip Tooltip   Manual Tooltip Tooltip   
<i-tooltip trigger="click">
    <i-button>Click Tooltip</i-button>
    <template slot="body">Tooltip</template>
</i-tooltip>
<i-tooltip trigger="hover">
    <i-button>Hover Tooltip</i-button>
    <template slot="body">Tooltip</template>
</i-tooltip>
<i-tooltip trigger="focus">
    <i-button>Focus Tooltip</i-button>
    <template slot="body">Tooltip</template>
</i-tooltip>
<i-tooltip :trigger="['focus', 'hover']">
    <i-button>Multiple Events Tooltip</i-button>
    <template slot="body">Tooltip</template>
</i-tooltip>&nbsp;
<i-tooltip trigger="manual" v-model="visible">
    <i-button @click="visible = !visible">Manual Tooltip</i-button>
    <template slot="body">Tooltip</template>
</i-tooltip>

Sizes

You're able to use the size modifier to control the size of your tooltips, using one of the available sizes: sm, md, and lg. The default size is set to md.

Small Tooltip Tooltip   Medium Tooltip Tooltip   Large Tooltip Tooltip 
<i-tooltip size="sm">
    <i-button>Small Tooltip</i-button>
    <template slot="body">Tooltip</template>
</i-tooltip>
<i-tooltip size="md">
    <i-button>Medium Tooltip</i-button>
    <template slot="body">Tooltip</template>
</i-tooltip>
<i-tooltip size="lg">
    <i-button>Large Tooltip</i-button>
    <template slot="body">Tooltip</template>
</i-tooltip>

Variants

Inkline includes two predefined tooltip styles, each serving its own semantic purpose. You can set the style of a <i-tooltip> using the variant property, which can have a value of light or dark. By default, tooltips use the dark variant.

Light Tooltip Tooltip   Dark Tooltip Tooltip 
<i-tooltip variant="light">
    <i-button variant="light">Light Tooltip</i-button>
    <template slot="body">Tooltip</template>
</i-tooltip>
<i-tooltip variant="dark">
    <i-button variant="dark">Dark Tooltip</i-button>
    <template slot="body">Tooltip</template>
</i-tooltip>

Component API

Here you can find a list of the various customization options you can use for the tooltip components as props, as well as available slots and events.

arrow Sets whether to attach an arrow to the tooltip. Boolean true, false true disabled Sets the tooltip state as disabled. Boolean true, false false id Sets the identifier of the tooltip. String tooltip-<uid> placement Sets the placement of the tooltip. String top, top-start, top-end, bottom, bottom-start, bottom-end, left, left-start, left-end, right, right-start, right-end top popperOptions Sets custom options for the Popper.js plugin. Object trigger Sets the trigger event of the tooltip. String click, hover hover transformOrigin Sets the transform origin of the tooltip. Boolean, String true variant Sets the color variant of the popover. String light, dark light default Slot for tooltip component trigger. body Slot for tooltip component body. change Emitted when visibility changes. (visible: Boolean) => {}

Sass Variables

Here you can find a list of the Sass variables you can use for the tooltip components. If you're looking to find common variables that these rely on, you should take a look at the Sass Variables page.

$tooltip-font-size $font-size $tooltip-font-weight $font-weight-normal $tooltip-line-height $line-height $tooltip-margin spacers('1/2') $tooltip-border-width $border-width $tooltip-border-radius $border-radius $tooltip-padding-base spacers('1/4') spacers('1/2') $tooltip-padding size-map($tooltip-padding-base, $sizes, $size-multipliers) $tooltip-variants ('monochrome-white')