# tooltip

The markup of every demo on <https://kuiper.oeds.it/tooltip/>, extracted from that
page. It is generated, so it cannot disagree with what the page renders.

Load the framework from the origin and read <https://kuiper.oeds.it/docs/KUIPER.md> first:
a Kuiper class carries no prefix and a UIkit behavior attribute carries `data-`.

## tooltip

Varies: 13 specimens.

```html
<div class="grid-xs grid-column-collapse grid-row-2xl" data-grid>
 <div class="width-1-1 width-1-1@s width-1-1@m width-1-1@l width-1-1@xl"><div class="card padding-2xl-horizontal"><button class="button width-1-1" data-tooltip="tooltip">tooltip</button></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-3@xl"><div class="card padding-2xl-horizontal"><button class="button width-1-1" data-tooltip="title: top-left; pos: top-left">top-left</button></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-3@xl"><div class="card padding-2xl-horizontal"><button class="button width-1-1" data-tooltip="title: top-center; pos: top-center">top-center</button></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-3@xl"><div class="card padding-2xl-horizontal"><button class="button width-1-1" data-tooltip="title: top-right; pos: top-right">top-right</button></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-3@xl"><div class="card padding-2xl-horizontal"><button class="button width-1-1" data-tooltip="title: bottom-left; pos: bottom-left">bottom-left</button></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-3@xl"><div class="card padding-2xl-horizontal"><button class="button width-1-1" data-tooltip="title: bottom-center; pos: bottom-center">bottom-center</button></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-3@xl"><div class="card padding-2xl-horizontal"><button class="button width-1-1" data-tooltip="title: bottom-right; pos: bottom-right">bottom-right</button></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-3@xl"><div class="card padding-2xl-horizontal"><button class="button width-1-1" data-tooltip="title: left-top; pos: left-top">left-top</button></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-3@xl"><div class="card padding-2xl-horizontal"><button class="button width-1-1" data-tooltip="title: left-center; pos: left-center">left-center</button></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-3@xl"><div class="card padding-2xl-horizontal"><button class="button width-1-1" data-tooltip="title: left-bottom; pos: left-bottom">left-bottom</button></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-3@xl"><div class="card padding-2xl-horizontal"><button class="button width-1-1" data-tooltip="title: right-top; pos: right-top">right-top</button></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-3@xl"><div class="card padding-2xl-horizontal"><button class="button width-1-1" data-tooltip="title: right-center; pos: right-center">right-center</button></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-3@xl"><div class="card padding-2xl-horizontal"><button class="button width-1-1" data-tooltip="title: right-bottom; pos: right-bottom">right-bottom</button></div></div>
</div>
```