Packages

mishka_chelekom

0.0.9
0.0.10-alpha.5 0.0.10-alpha.4 0.0.10-alpha.3 0.0.10-alpha.2 0.0.10-alpha.1 0.0.9 0.0.9-rc.2 0.0.9-rc.1 0.0.9-beta.5 0.0.9-beta.4 0.0.9-beta.3 0.0.9-beta.2 0.0.9-beta.1 0.0.9-alpha.20 0.0.9-alpha.18 0.0.9-alpha.17 0.0.9-alpha.16 0.0.9-alpha.15 0.0.9-alpha.14 0.0.9-alpha.13 0.0.9-alpha.12 0.0.9-alpha.11 0.0.9-alpha.10 0.0.9-alpha.9 0.0.9-alpha.8 0.0.9-alpha.7 0.0.9-alpha.6 0.0.9-alpha.5 0.0.9-alpha.4 0.0.9-alpha.3 0.0.9-alpha.2 0.0.9-alpha.1 0.0.8 0.0.8-rc.2 0.0.8-rc.1 0.0.8-beta.5 0.0.8-beta.4 0.0.8-beta.3 0.0.8-beta.2 0.0.8-beta.1 0.0.8-alpha.4 0.0.8-alpha.3 0.0.8-alpha.2 0.0.8-alpha.1 0.0.7 0.0.6 0.0.6-alpha.2 0.0.6-alpha.1 0.0.5 0.0.5-beta.2 0.0.5-beta.1 0.0.5-alpha.12 0.0.5-alpha.11 0.0.5-alpha.10 0.0.5-alpha.9 0.0.5-alpha.8 0.0.5-alpha.7 0.0.5-alpha.6 0.0.5-alpha.5 0.0.5-alpha.4 0.0.5-alpha.3 0.0.5-alpha.2 0.0.5-alpha.1 0.0.4 0.0.4-beta.3 0.0.4-beta.2 0.0.4-beta.1 0.0.4-alpha.9 0.0.4-alpha.8 0.0.4-alpha.7 0.0.4-alpha.6 0.0.4-alpha.5 0.0.4-alpha.4 0.0.4-alpha.3 0.0.4-alpha.2 0.0.4-alpha.1 0.0.3 0.0.3-alpha.3 0.0.3-alpha.2 0.0.3-alpha.1 0.0.2 0.0.2-rc.2 0.0.2-rc.1 0.0.2-beta.4 0.0.2-beta.3 0.0.2-beta.2 0.0.2-beta.1 0.0.2-alpha.3 0.0.2-alpha.2 0.0.2-alpha.1 0.0.1

Mishka Chelekom is a fully featured components and UI kit library for Phoenix & Phoenix LiveView

HexDocs

Current section

Files

Jump to
Readme
91 Versions
10 Dependencies
Dependants
Files
Activity
mishka_chelekom usage-rules components tooltip.md
Raw

usage-rules/components/tooltip.md 

# Tooltip Component



Hover-triggered informational popup with customizable positioning.



**Documentation**: https://mishka.tools/chelekom/docs/tooltip



> **For LLM Agents**: If you need more details, examples, or edge cases not covered here, fetch the full documentation from the URL above.



## Generate



```bash

mix mishka.ui.gen.component tooltip

```



## Dependencies



None (no components, no JS).



## Attributes



| Attribute | Type | Default | Description | Options |

|-----------|------|---------|-------------|---------|

| `variant` | `:string` | `"base"` | Style variant | `base`, `default`, `shadow`, `bordered`, `gradient` |

| `color` | `:string` | `"base"` | Color theme | `base`, `natural`, `white`, `primary`, `secondary`, `dark`, `success`, `warning`, `danger`, `info`, `silver`, `misc`, `dawn` |

| `size` | `:string` | `"medium"` | Text size | `extra_small`, `small`, `medium`, `large`, `extra_large` |

| `padding` | `:string` | `"small"` | Content padding | |

| `rounded` | `:string` | `"medium"` | Border radius | |

| `position` | `:string` | `"top"` | Tooltip position | `top`, `bottom`, `left`, `right` |



## Slots



- `trigger` — element that triggers the tooltip

- `content` — tooltip content



## Usage Examples



### Basic



```heex

<.tooltip>

  <:trigger>

    <.button>Hover me</.button>

  </:trigger>

  <:content>This is a tooltip</:content>

</.tooltip>

```



### Positions



```heex

<.tooltip position="top">

  <:trigger><.button>Top</.button></:trigger>

  <:content>Top tooltip</:content>

</.tooltip>



<.tooltip position="bottom">

  <:trigger><.button>Bottom</.button></:trigger>

  <:content>Bottom tooltip</:content>

</.tooltip>



<.tooltip position="left">

  <:trigger><.button>Left</.button></:trigger>

  <:content>Left tooltip</:content>

</.tooltip>



<.tooltip position="right">

  <:trigger><.button>Right</.button></:trigger>

  <:content>Right tooltip</:content>

</.tooltip>

```



### Colors and Variants



```heex

<.tooltip color="dark">

  <:trigger><span class="underline cursor-help">Dark tooltip</span></:trigger>

  <:content>Dark themed tooltip</:content>

</.tooltip>



<.tooltip color="primary">

  <:trigger><span class="underline cursor-help">Primary tooltip</span></:trigger>

  <:content>Primary themed tooltip</:content>

</.tooltip>



<.tooltip color="warning">

  <:trigger><span class="underline cursor-help">Warning tooltip</span></:trigger>

  <:content>Warning themed tooltip</:content>

</.tooltip>



<.tooltip variant="shadow" color="white">

  <:trigger><.button>Shadow</.button></:trigger>

  <:content>Shadow variant</:content>

</.tooltip>



<.tooltip variant="bordered" color="natural">

  <:trigger><.button>Bordered</.button></:trigger>

  <:content>Bordered variant</:content>

</.tooltip>

```



### With Icon Trigger



```heex

<.tooltip color="dark" position="right">

  <:trigger>

    <.icon name="hero-question-mark-circle" class="size-5 text-gray-500 cursor-help" />

  </:trigger>

  <:content>Helpful information here</:content>

</.tooltip>

```



## Common Patterns



### Form Field Help



```heex

<div class="flex items-center gap-2">

  <label>Password</label>

  <.tooltip color="dark" size="small">

    <:trigger>

      <.icon name="hero-information-circle" class="size-4 text-gray-400 cursor-help" />

    </:trigger>

    <:content>

      <div class="space-y-1">

        <p class="font-medium">Password requirements:</p>

        <ul class="text-xs list-disc pl-4">

          <li>At least 8 characters</li>

          <li>One uppercase letter</li>

          <li>One number</li>

        </ul>

      </div>

    </:content>

  </.tooltip>

</div>

```



### Icon Action Tooltips



```heex

<div class="flex gap-2">

  <.tooltip position="bottom">

    <:trigger>

      <.button variant="ghost" size="small">

        <.icon name="hero-pencil" class="size-4" />

      </.button>

    </:trigger>

    <:content>Edit</:content>

  </.tooltip>



  <.tooltip position="bottom">

    <:trigger>

      <.button variant="ghost" size="small">

        <.icon name="hero-trash" class="size-4" />

      </.button>

    </:trigger>

    <:content>Delete</:content>

  </.tooltip>

</div>

```



### Truncated Text



```heex

<.tooltip>

  <:trigger>

    <span class="truncate max-w-32 block">{@long_text}</span>

  </:trigger>

  <:content>{@long_text}</:content>

</.tooltip>

```



### Status Indicator



```heex

<.tooltip color="success">

  <:trigger>

    <span class="inline-block w-3 h-3 rounded-full bg-green-500" />

  </:trigger>

  <:content>Online</:content>

</.tooltip>

```