@digital-blueprint/lunchlottery-app/vendor/toolkit/packages/tooltip/README.md

[GitHub Repository](https://github.com/digital-blueprint/lunchlottery-app) | [npmjs package](https://www.npmjs.com/package/@digital-blueprint/lunchlottery-app) | [Unpkg CDN](https://unpkg.com/browse/@digital-blueprint/lunchlottery-app/)

## Tooltip Web Component

The tooltip component provides an icon as an anker for a tooltip.
There is a generic tooltip `<dbp-tooltip>` which supports any icon the app has bundled.
Another info tooltip `<dbp-info-tooltip>` shows an embedded info icon (small letter i inside a circle) as a convenient
shortcut.

### Install

You can install this component via npm:

```bash
npm i @dbp-toolkit/tooltip
```

### Usage

```html
<dbp-tooltip text-content="text to show" icon-name="information"></dbp-tooltip>
<dbp-info-tooltip text-content="text to show"></dbp-info-tooltip>
<script type="module" src="node_modules/@dbp-toolkit/tooltip/dist/dbp-tooltip.js"></script>
```

Or directly via CDN:

```html
<dbp-tooltip text-content="text to show" icon-name="information"></dbp-tooltip>
<dbp-info-tooltip text-content="text to show"></dbp-info-tooltip>
<script
    type="module"
    src="https://unpkg.com/@dbp-toolkit/tooltip@0.0.1/dist/dbp-tooltip.js"></script>
```

### Attributes

- `text-content`: Text to show as tooltip (default is 'text missing.' as a reminder!)
- `icon-name`: (`<dbp-tooltip>` only, default is a skull) Name of the bundled icon (SVG) for `<dbp-icon>`
- `button-text`: (`<dbp-button-tooltip>` only, default is 'submit') Text on the button
- `type`: (`<dbp-button-tooltip>` only, default is 'submit') Options are 'submit', 'reset', or any string
- `form-id`: (`<dbp-button-tooltip>` only) Id of the from to submit, if omitted the next form in DOM hierarchy will be used.

### CSS custom properties

- `--dbp-tooltip-icon-color`: set icon color (default: --dbp-content)
- `--dbp-tooltip-box-bg-color`: set tooltip background color (default: --dbp-content-surface)
- `--dbp-tooltip-box-font-color`: set tooltip font color (default: --dbp-on-content-surface)
- `--dbp-tooltip-arrow-color`: set tooltip arrow background color (default: --dbp-content)
- `--dbp-tooltip-box-font-weight`: set tooltip font weight (default: normal)
- `--dbp-tooltip-button-background-color`: set button background (default: --dbp-background)
- `--dbp-tooltip-button-border`: set button border (default: --dbp-border)
- `--dbp-tooltip-button-color`: set button font color (default: --dbp-content)