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
51 lines
976 B
Markdown
51 lines
976 B
Markdown
---
|
|
parts:
|
|
- Tooltip
|
|
- Examples
|
|
title: 'Tooltip: Examples'
|
|
eleventyNavigation:
|
|
key: 'Tooltip: Examples'
|
|
order: 30
|
|
parent: Tooltip
|
|
title: Examples
|
|
---
|
|
|
|
# Tooltip: Examples
|
|
|
|
```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;
|
|
}
|
|
|
|
.demo-tooltip-content {
|
|
display: block;
|
|
font-size: 16px;
|
|
color: white;
|
|
background-color: black;
|
|
border-radius: 4px;
|
|
padding: 8px;
|
|
}
|
|
|
|
.demo-box-placements {
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin: 40px 0 0 200px;
|
|
}
|
|
|
|
.demo-box-placements lion-tooltip {
|
|
margin: 20px;
|
|
}
|
|
</style>
|
|
<lion-tooltip has-arrow>
|
|
<button slot="invoker" class="demo-tooltip-invoker">Hover me</button>
|
|
<div slot="content" class="demo-tooltip-content">This is a tooltip</div>
|
|
</lion-tooltip>
|
|
`;
|
|
```
|