lion/docs/components/tooltip/examples.md

parts	title	eleventyNavigation
Tooltip Examples	Tooltip: Examples	key order parent title Tooltip: Examples 30 Tooltip Examples

Tooltip: Examples

import { html } from '@mdjs/mdjs-preview';
import '@lion/ui/define/lion-tooltip.js';

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>
`;