11bbc5fff5
* feat: migrated the navigation metadata from inline MD title decorations to frontmatter * fix: fixed frontmatter metadate for api-table MDs * fix: fixed frontmatter eslint issue
56 lines
1.3 KiB
Markdown
56 lines
1.3 KiB
Markdown
---
|
|
parts:
|
|
- Tooltip
|
|
- Overview
|
|
title: 'Tooltip: Overview'
|
|
eleventyNavigation:
|
|
key: 'Tooltip: Overview'
|
|
order: 10
|
|
parent: Tooltip
|
|
title: Overview
|
|
---
|
|
|
|
# Tooltip: Overview
|
|
|
|
A web component used for basic popups on hover.
|
|
Its purpose is to show content appearing when the user hovers over an invoker element with the cursor or with the keyboard, or if the invoker element is focused.
|
|
|
|
```js script
|
|
import { html } from '@mdjs/mdjs-preview';
|
|
import '@lion/ui/define/lion-tooltip.js';
|
|
```
|
|
|
|
```js preview-story
|
|
export const main = () => html`
|
|
<style>
|
|
.demo-tooltip-invoker {
|
|
margin: 50px;
|
|
}
|
|
</style>
|
|
<lion-tooltip has-arrow>
|
|
<button slot="invoker" class="demo-tooltip-invoker">Hover me</button>
|
|
<div slot="content">This is a tooltip</div>
|
|
</lion-tooltip>
|
|
`;
|
|
```
|
|
|
|
## Features
|
|
|
|
- Show content when hovering the invoker
|
|
- Show content when the invoker is focused
|
|
- Does not show content when invoker is disabled
|
|
- Uses Popper.js under the hood, to have the content pop up relative to the invoker
|
|
- Use `.config` to override the overlay configuration
|
|
- Config has `popperConfig` property that has a one to one relation with Popper.js configuration API.
|
|
|
|
## Installation
|
|
|
|
```bash
|
|
npm i --save @lion/ui
|
|
```
|
|
|
|
```js
|
|
import { LionTooltip } from '@lion/ui/tooltip.js';
|
|
// or
|
|
import '@lion/ui/define/lion-tooltip.js';
|
|
```
|