Hello SenangStart!
Zero config, instant styling.
```
**Documentation**: [Getting Started Guide](https://bookklik-technologies.github.io/senangstart-css/guide/getting-started.html)
# Tooltip
Category: feedback
Description: Hover Tooltip
## Small Variant
### SenangStart CSS Code
```html
<div layout="relative hoverable focusable pressable expandable inline">
<button type="button" space="p-x:medium-2x p-y:small-2x" visual="text:white bg:blue-600 hover:bg:blue-700 font:tw-medium rounded:medium text-size:small text:center">Hover me (S)</button>
<div layout="absolute bottom:full left:half hidden hover:block" space="m-b:small w:[max-content] p-x:small p-y:tiny" visual="translate-x:-half bg:gray-900 text:white text-size:mini rounded:small shadow:small transition:opacity duration:slow">
Tooltip text
<div layout="absolute top:full left:half" visual="translate-x:-half border-w:tiny border:transparent border-t:gray-900"></div>
</div>
</div>
```
### Tailwind CSS Code
```html
<div class="relative group inline-block">
<button type="button" class="text-white bg-blue-600 hover:bg-blue-700 font-medium rounded-lg text-sm px-5 py-2.5 text-center">Hover me (S)</button>
<div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 hidden group-hover:block w-max px-2 py-1 bg-gray-900 text-white text-xs rounded shadow-sm transition-opacity duration-300">
Tooltip text
<div class="absolute top-full left-1/2 -translate-x-1/2 border-4 border-transparent border-t-gray-900"></div>
</div>
</div>
```
## Medium Variant
### SenangStart CSS Code
```html
<div layout="relative hoverable focusable pressable expandable inline">
<button type="button" space="p-x:medium-3x p-y:small-3x" visual="text:white bg:blue-600 hover:bg:blue-700 font:tw-medium rounded:medium text-size:base text:center">Hover me (M)</button>
<div layout="absolute bottom:full left:half hidden hover:block" space="m-b:small w:[max-content] p-x:small-3x p-y:small" visual="translate-x:-half bg:gray-900 text:white text-size:small rounded:small shadow:small transition:opacity duration:slow">
Tooltip text
<div layout="absolute top:full left:half" visual="translate-x:-half border-w:tiny border:transparent border-t:gray-900"></div>
</div>
</div>
```
### Tailwind CSS Code
```html
<div class="relative group inline-block">
<button type="button" class="text-white bg-blue-600 hover:bg-blue-700 font-medium rounded-lg text-base px-6 py-3 text-center">Hover me (M)</button>
<div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 hidden group-hover:block w-max px-3 py-2 bg-gray-900 text-white text-sm rounded shadow-sm transition-opacity duration-300">
Tooltip text
<div class="absolute top-full left-1/2 -translate-x-1/2 border-4 border-transparent border-t-gray-900"></div>
</div>
</div>
```
## Large Variant
### SenangStart CSS Code
```html
<div layout="relative hoverable focusable pressable expandable inline">
<button type="button" space="p-x:large p-y:small-4x" visual="text:white bg:blue-600 hover:bg:blue-700 font:tw-medium rounded:medium text-size:large text:center">Hover me (L)</button>
<div layout="absolute bottom:full left:half hidden hover:block" space="m-b:small w:[max-content] p-x:medium p-y:small" visual="translate-x:-half bg:gray-900 text:white text-size:base rounded:small shadow:small transition:opacity duration:slow">
Tooltip text
<div layout="absolute top:full left:half" visual="translate-x:-half border-w:tiny border:transparent border-t:gray-900"></div>
</div>
</div>
```
### Tailwind CSS Code
```html
<div class="relative group inline-block">
<button type="button" class="text-white bg-blue-600 hover:bg-blue-700 font-medium rounded-lg text-lg px-8 py-3.5 text-center">Hover me (L)</button>
<div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 hidden group-hover:block w-max px-4 py-2 bg-gray-900 text-white text-base rounded shadow-sm transition-opacity duration-300">
Tooltip text
<div class="absolute top-full left-1/2 -translate-x-1/2 border-4 border-transparent border-t-gray-900"></div>
</div>
</div>
```