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 popover.md
Raw

usage-rules/components/popover.md 

# Popover Component



Interactive popover for additional information on hover or click.



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



> **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 popover

```



## Dependencies



None (necessary, optional, or JS).



## Attributes



| Attribute | Type | Default | Description |

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

| `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"` | Content size |

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

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

| `space` | `:string` | `"small"` | Trigger spacing |

| `position` | `:string` | `"top"` | Popover position — `top`, `bottom`, `left`, `right` |

| `clickable` | `:boolean` | `false` | Click (instead of hover) to activate |

| `inline` | `:boolean` | `false` | Inline display |



## Slots



- `trigger` — element that triggers the popover.

- `inner_block` — popover content.



## Usage Examples



### Basic (hover) and click-activated



```heex

<.popover>

  <:trigger>

    <.button>Hover Me</.button>

  </:trigger>

  <p>Popover content appears here.</p>

</.popover>



<.popover clickable>

  <:trigger>

    <.button>Click Me</.button>

  </:trigger>

  <p>This popover is triggered by click.</p>

</.popover>

```



### Positions



```heex

<.popover position="top"><:trigger>Top</:trigger>Content</.popover>

<.popover position="bottom"><:trigger>Bottom</:trigger>Content</.popover>

<.popover position="left"><:trigger>Left</:trigger>Content</.popover>

<.popover position="right"><:trigger>Right</:trigger>Content</.popover>

```



### Variants



```heex

<.popover variant="default" color="white">

  <:trigger>Default</:trigger>

  Content

</.popover>



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

  <:trigger>Shadow</:trigger>

  Content

</.popover>

```



### Inline popover



```heex

<p>

  Learn more about

  <.popover inline variant="shadow">

    <:trigger>

      <span class="text-primary-500 underline cursor-pointer">this feature</span>

    </:trigger>

    <p>Detailed explanation of the feature.</p>

  </.popover>

  in our docs.

</p>

```



## Common Patterns



### Info tooltip (icon trigger)



```heex

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

  <label>Email</label>

  <.popover variant="shadow" color="dark" size="small">

    <:trigger>

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

    </:trigger>

    <p class="text-white text-sm">We'll never share your email.</p>

  </.popover>

</div>

```



### User card popover (`padding="none"` for custom layout)



```heex

<.popover variant="shadow" padding="none">

  <:trigger>

    <.avatar src={@user.avatar} size="small" class="cursor-pointer" />

  </:trigger>

  <div class="p-4 min-w-48">

    <div class="flex items-center gap-3 mb-3">

      <.avatar src={@user.avatar} size="medium" />

      <div>

        <p class="font-bold">{@user.name}</p>

        <p class="text-sm text-gray-500">{@user.role}</p>

      </div>

    </div>

    <.button size="small" full_width>View Profile</.button>

  </div>

</.popover>

```