Popover
v0.0.10
mix mishka.ui.gen.component popover
Overview of the Phoenix and LiveView Popover Component
The Mishka Chelekom popover component is a Phoenix LiveView component that enables developers to create dynamic and customizable popover elements, ideal for displaying additional information, tooltips, or interactive content.
Overview of the Phoenix and LiveView Popover Component
Photography is a powerful medium that captures moments, emotions, and stories through the lens. From stunning landscapes to candid portraits, it transforms fleeting moments into lasting memories. Digital Photography , has transformed how we document our world.
This Phoenix LiveView component also supports embedding text, icons, and custom content, making it perfect for improving user interaction and guiding them through additional context or information. With its responsive design and ease of use, this popover component enhances user engagement and overall experience.
How to use popover
To use the popover component, you'll first need to define a trigger element, which can be any clickable item, like a button, link, or text. The trigger is defined within the trigger slot. After setting the trigger, you define the content to be displayed inside the content slot. This content can include text, images, or any other HTML elements you want to show when the popover is triggered.
How to use popover
<!--This popover is clickable -->
<!--so use a unique ID on the popover -->
<.popover clickable id="uniqu_id" rounded="small" width="large" color="dawn" padding="small">
<:trigger class="custom_class">
<.button color="dawn" size="small">popover trigger</.button>
</:trigger>
<:content class="custom_class">
Content within popover content component
</:content>
</.popover>
<!--Example of popover with :trigger and :content -->
<.popover
clickable
id="uniqu_id"
rounded="small"
width="large"
color="dawn"
padding="small"
>
<:trigger>
<.button color="dawn" size="small">popover trigger</.button>
</:trigger>
<:content
class="custom_class"
>
Content within popover content component
</:content>
</.popover>Inline popover
The inline mode of the popover component is designed for situations where you want to display a popover within text or other inline elements. If you're using a popover inside a tag like p, which cannot contain block-level elements, it's important to use inline tags like span to ensure proper behavior. This prevents layout issues and ensures the popover functions smoothly. You can enable this mode by setting the inline prop on the popover component.
Inline popover
The Netherlands is a vibrant country known for its scenic landscapes, innovative culture, and progressive values. Famous for its windmills, tulip fields, and extensive canals, it offers a mix of nature and city life. Amsterdam , the capital, stands out with its historic canals, world-class museums, and welcoming atmosphere, making it a cultural hub within the country. Whether exploring by bike or enjoying the lively streets, the Netherlands offers a unique blend of charm and modernity.
<!--an example of how to use inline popover within a <p> tag-->
<p>
Learn more about
<.popover id="popover-1" inline>
<:trigger class="your_classes">Mishka Chelekom</:trigger>
<:content class="custom_class">
<span class="p-4 block">
<span class="text-lg font-semibold block">About Mishka Chelekom</span>
</span>
</:content>
</.popover>
and its UI components.
</p>
<!--Clickable inline-->
<!--if you add clickable to popover keep in mind use unique IDs-->
<p>
Learn more about
<.popover clickable inline id="unique_id">
<:trigger>Mishka Chelekom</:trigger>
<:content>
<span class="p-4 block">
<span class="text-lg font-semibold block">About Mishka Chelekom</span>
</span>
</:content>
</.popover>
and its UI components.
</p>Clickable popover
The clickable mode of the popover component allows you to trigger the display of popover content by clicking on a trigger.
Clickable popover
<.popover clickable id="unique_id">
<:trigger></:trigger>
<:content></:content>
</.popover>Show arrow prop
show_arrow is a boolean attribute that allows you to control the visibility of the arrow in the popover component. When set to true, the arrow will be displayed, providing a visual indicator of the popover's direction or connection to its triggering element. By default, this attribute is set to true. If you want a cleaner look or the arrow is unnecessary for your design, you can set it to false to hide the arrow. This flexibility ensures the popover can adapt to various use cases and design requirements.
Show arrow prop
<!--By default show_arrow is true-->
<.popover id="popover-2" show_arrow={false}>
<:trigger></:trigger>
<:content></:content>
</.popover>
<.popover id="popover-3" show_arrow={true}>
<:trigger></:trigger>
<:content></:content>
</.popover>Popover base Variant
Popover base Variant
<.popover id="popover-4">
<:trigger class="your_classes"></:trigger>
<:content></:content>
</.popover>Popover default Variant
The default style of the Mishka Chelekom popover applies a solid background. It is the default variant of popover component.
Popover default Variant
<.popover id="popover-5" color="white">
<:trigger class="your_classes"></:trigger>
<:content></:content>
</.popover>
<.popover id="popover-6" color="primary">
<:trigger class="your_classes"></:trigger>
<:content></:content>
</.popover>
<.popover id="popover-7" color="secondary">
<:trigger class="your_classes"></:trigger>
<:content></:content>
</.popover>
<.popover id="popover-8" color="dark">
<:trigger class="your_classes"></:trigger>
<:content></:content>
</.popover>
<.popover id="popover-9" color="success">
<:trigger class="your_classes"></:trigger>
<:content></:content>
</.popover>
<.popover id="popover-10" color="warning">
<:trigger class="your_classes"></:trigger>
<:content></:content>
</.popover>
<.popover id="popover-11" color="danger">
<:trigger class="your_classes"></:trigger>
<:content></:content>
</.popover>
<.popover id="popover-12" color="info">
<:trigger class="your_classes"></:trigger>
<:content></:content>
</.popover>
<.popover id="popover-13" color="silver">
<:trigger class="your_classes"></:trigger>
<:content></:content>
</.popover>
<.popover id="popover-14" color="misc">
<:trigger class="your_classes"></:trigger>
<:content></:content>
</.popover>
<.popover id="popover-15" color="dawn">
<:trigger class="your_classes"></:trigger>
<:content></:content>
</.popover>Popover shadow Variant
The shadow variant of the Mishka Chelekom popover is similar to the default variant, but it also includes a shadow.
Popover shadow Variant
<.popover id="popover-16" variant="shadow" color="primary">
<:trigger class="your_classes"></:trigger>
<:content></:content>
</.popover>
<.popover id="popover-17" variant="shadow" color="secondary">
<:trigger class="your_classes"></:trigger>
<:content></:content>
</.popover>
<.popover id="popover-18" variant="shadow" color="success">
<:trigger class="your_classes"></:trigger>
<:content></:content>
</.popover>
<.popover id="popover-19" variant="shadow" color="warning">
<:trigger class="your_classes"></:trigger>
<:content></:content>
</.popover>
<.popover id="popover-20" variant="shadow" color="danger">
<:trigger class="your_classes"></:trigger>
<:content></:content>
</.popover>
<.popover id="popover-21" variant="shadow" color="info">
<:trigger class="your_classes"></:trigger>
<:content></:content>
</.popover>
<.popover id="popover-22" variant="shadow" color="silver">
<:trigger class="your_classes"></:trigger>
<:content></:content>
</.popover>
<.popover id="popover-23" variant="shadow" color="misc">
<:trigger class="your_classes"></:trigger>
<:content></:content>
</.popover>
<.popover id="popover-24" variant="shadow" color="dawn">
<:trigger class="your_classes"></:trigger>
<:content></:content>
</.popover>Popover bordered Variant
The Bordered variant of the Mishka Chelekom popover has lighter background and a border. Bordered variant have also white and dark colors which are the same colors in the dark and light mode.
Popover bordered Variant
<.popover id="popover-25" variant="bordered" color="white">
<:trigger class="your_classes"></:trigger>
<:content></:content>
</.popover>
<.popover id="popover-26" variant="bordered" color="primary">
<:trigger class="your_classes"></:trigger>
<:content></:content>
</.popover>
<.popover id="popover-27" variant="bordered" color="secondary">
<:trigger class="your_classes"></:trigger>
<:content></:content>
</.popover>
<.popover id="popover-28" variant="bordered" color="dark">
<:trigger class="your_classes"></:trigger>
<:content></:content>
</.popover>
<.popover id="popover-29" variant="bordered" color="success">
<:trigger class="your_classes"></:trigger>
<:content></:content>
</.popover>
<.popover id="popover-30" variant="bordered" color="warning">
<:trigger class="your_classes"></:trigger>
<:content></:content>
</.popover>
<.popover id="popover-31" variant="bordered" color="danger">
<:trigger class="your_classes"></:trigger>
<:content></:content>
</.popover>
<.popover id="popover-32" variant="bordered" color="info">
<:trigger class="your_classes"></:trigger>
<:content></:content>
</.popover>
<.popover id="popover-33" variant="bordered" color="silver">
<:trigger class="your_classes"></:trigger>
<:content></:content>
</.popover>
<.popover id="popover-34" variant="bordered" color="misc">
<:trigger class="your_classes"></:trigger>
<:content></:content>
</.popover>
<.popover id="popover-35" variant="bordered" color="dawn">
<:trigger class="your_classes"></:trigger>
<:content></:content>
</.popover>Popover gradient Variant
The gradient variant of the Mishka Chelekom popover has gradients in various colors.
Popover gradient Variant
<.popover id="popover-36" variant="gradient" color="primary">
<:trigger class="your_classes"></:trigger>
<:content></:content>
</.popover>
<.popover id="popover-37" variant="gradient" color="secondary">
<:trigger class="your_classes"></:trigger>
<:content></:content>
</.popover>
<.popover id="popover-38" variant="gradient" color="success">
<:trigger class="your_classes"></:trigger>
<:content></:content>
</.popover>
<.popover id="popover-39" variant="gradient" color="warning">
<:trigger class="your_classes"></:trigger>
<:content></:content>
</.popover>
<.popover id="popover-40" variant="gradient" color="danger">
<:trigger class="your_classes"></:trigger>
<:content></:content>
</.popover>
<.popover id="popover-41" variant="gradient" color="info">
<:trigger class="your_classes"></:trigger>
<:content></:content>
</.popover>
<.popover id="popover-42" variant="gradient" color="silver">
<:trigger class="your_classes"></:trigger>
<:content></:content>
</.popover>
<.popover id="popover-43" variant="gradient" color="misc">
<:trigger class="your_classes"></:trigger>
<:content></:content>
</.popover>
<.popover id="popover-44" variant="gradient" color="dawn">
<:trigger class="your_classes"></:trigger>
<:content></:content>
</.popover>Popover position prop
The position attribute in the popover component allows developers to control where the popover appears relative to its trigger element. The default value is set to top, meaning the popover will appear above the trigger by default. Other available options include bottom, left, and right, which give developers flexibility in how the popover is displayed. Each position is calculated using custom classes that manage translation and alignment of the popover relative to its trigger element. For example, when using bottom, the popover will appear below the trigger, and the popover arrow will point upward.
Popover position prop
<!--The position is set to top by default, you don't need to specify it.-->
<.popover id="popover-45">
<:trigger class="your_classes"></:trigger>
<:content></:content>
</.popover>
<.popover id="popover-46" position="bottom">
<:trigger class="your_classes"></:trigger>
<:content></:content>
</.popover>
<.popover id="popover-47" position="left">
<:trigger class="your_classes"></:trigger>
<:content></:content>
</.popover>
<.popover id="popover-48" position="right">
<:trigger class="your_classes"></:trigger>
<:content></:content>
</.popover>Popover size prop
The size prop offers values such as extra_small, small, medium, large, and extra_large. These values control text size within the popover contents.
Popover size prop
<.popover id="popover-49" size="extra_small">
<:trigger class="your_classes"></:trigger>
<:content></:content>
</.popover>
<.popover id="popover-50" size="small">
<:trigger class="your_classes"></:trigger>
<:content></:content>
</.popover>
<.popover id="popover-51" size="medium">
<:trigger class="your_classes"></:trigger>
<:content></:content>
</.popover>
<.popover id="popover-52" size="large">
<:trigger class="your_classes"></:trigger>
<:content></:content>
</.popover>
<.popover id="popover-53" size="extra_large">
<:trigger class="your_classes"></:trigger>
<:content></:content>
</.popover>Popover space prop
The space prop offers values such as extra_small, small, medium, large, and extra_large. These values control the vertical spacing between elements within the popover content.
Popover space prop
<.popover id="popover-54" space="extra_small">
<:trigger class="your_classes"></:trigger>
<:content></:content>
</.popover>
<.popover id="popover-55" space="small">
<:trigger class="your_classes"></:trigger>
<:content></:content>
</.popover>
<.popover id="popover-56" space="medium">
<:trigger class="your_classes"></:trigger>
<:content></:content>
</.popover>
<.popover id="popover-57" space="large">
<:trigger class="your_classes"></:trigger>
<:content></:content>
</.popover>
<.popover id="popover-58" space="extra_large">
<:trigger class="your_classes"></:trigger>
<:content></:content>
</.popover>Popover padding prop
The padding prop offers values such as extra_small, small, medium, large, and extra_large. These values control the padding around the content inside the popover contents.
Popover padding prop
<.popover id="popover-59" padding="extra_small">
<:trigger class="your_classes"></:trigger>
<:content></:content>
</.popover>
<.popover id="popover-60" padding="small">
<:trigger class="your_classes"></:trigger>
<:content></:content>
</.popover>
<.popover id="popover-61" padding="medium">
<:trigger class="your_classes"></:trigger>
<:content></:content>
</.popover>
<.popover id="popover-62" padding="large">
<:trigger class="your_classes"></:trigger>
<:content></:content>
</.popover>
<.popover id="popover-63" padding="extra_large">
<:trigger class="your_classes"></:trigger>
<:content></:content>
</.popover>Popover width prop
The width prop allows you to set the minimum width of the component, ensuring it meets design requirements for various use cases. It accepts several predefined values: extra_small, small, medium, large, extra_large, double_large, triple_large, and quadruple_large, each corresponding to a specific minimum width.
Popover width prop
<.popover id="popover-64" width="extra_small">
<:trigger class="your_classes"></:trigger>
<:content></:content>
</.popover>
<.popover id="popover-65" width="small">
<:trigger class="your_classes"></:trigger>
<:content></:content>
</.popover>
<.popover id="popover-66" width="medium">
<:trigger class="your_classes"></:trigger>
<:content></:content>
</.popover>
<.popover id="popover-67" width="large">
<:trigger class="your_classes"></:trigger>
<:content></:content>
</.popover>
<.popover id="popover-68" width="extra_large">
<:trigger class="your_classes"></:trigger>
<:content></:content>
</.popover>
<.popover id="popover-69" width="double_large">
<:trigger class="your_classes"></:trigger>
<:content></:content>
</.popover>
<.popover id="popover-70" width="triple_large">
<:trigger class="your_classes"></:trigger>
<:content></:content>
</.popover>
<.popover id="popover-71" width="quadruple_large">
<:trigger class="your_classes"></:trigger>
<:content></:content>
</.popover>Popover rounded prop
The rounded prop allows developers to customize the border-radius of components, controlling how rounded the corners appear. The rounded prop accepts values like extra_small for minimal rounding, small, medium, large, extra_large for more pronounced rounding, and none to remove rounding entirely. This flexibility allows developers to adjust the component's visual style, giving it a sleek, rounded appearance or sharp edges to fit various design needs.
Popover rounded prop
<.popover id="popover-72" rounded="extra_small">
<:trigger class="your_classes"></:trigger>
<:content></:content>
</.popover>
<.popover id="popover-73" rounded="small">
<:trigger class="your_classes"></:trigger>
<:content></:content>
</.popover>
<.popover id="popover-74" rounded="medium">
<:trigger class="your_classes"></:trigger>
<:content></:content>
</.popover>
<.popover id="popover-75" rounded="large">
<:trigger class="your_classes"></:trigger>
<:content></:content>
</.popover>
<.popover id="popover-76" rounded="extra_large">
<:trigger class="your_classes"></:trigger>
<:content></:content>
</.popover>
<.popover id="popover-77" rounded="none">
<:trigger class="your_classes"></:trigger>
<:content></:content>
</.popover>Text position prop
The text_position attribute controls the alignment of text within a component, ensuring that content is properly positioned based on the design needs. With options like left, right, end, start, justify, and center, you can align text to the left, right, or center of the component, respectively. This flexibility allows developers to manage how textual content is presented, enhancing readability and improving the visual structure of the component. If no specific value is provided, a default alignment is applied, typically aligning the text to the left.
Text position prop
<.popover id="popover-78" text_position="left">
<:trigger class="your_classes"></:trigger>
<:content></:content>
</.popover>
<.popover id="popover-79" text_position="right">
<:trigger class="your_classes"></:trigger>
<:content></:content>
</.popover>
<.popover id="popover-80" text_position="center">
<:trigger class="your_classes"></:trigger>
<:content></:content>
</.popover>
<.popover id="popover-81" text_position="justify">
<:trigger class="your_classes"></:trigger>
<:content></:content>
</.popover>
<.popover id="popover-82" text_position="start">
<:trigger class="your_classes"></:trigger>
<:content></:content>
</.popover>
<.popover id="popover-83" text_position="end">
<:trigger class="your_classes"></:trigger>
<:content></:content>
</.popover>Popover content font weight prop
The font_weight prop controls the font weight of the text. By setting this prop, you can determine how bold or light the text appears within the title section. The default value is font-normal. You can customize this value to apply different font weights, such as making the text lighter or bolder, depending on the visual style and emphasis you want to create for the popover's title. This provides flexibility in ensuring the title stands out appropriately within the overall popover layout.
Popover content font weight prop
<.popover id="popover-84" font_weight="font-thin">
<:trigger class="your_classes"></:trigger>
<:content></:content>
</.popover>
<.popover id="popover-85" font_weight="font-normal">
<:trigger class="your_classes"></:trigger>
<:content></:content>
</.popover>Attributes
| Name | Type | Default | Values | Required | Description |
|---|---|---|---|---|---|
id
|
string
| — | — | Yes | A unique identifier is used to manage state and interaction |
class
|
any
| — | — | No | Custom CSS class for additional styling |
inline
|
boolean
|
false
| — | No | Determines whether this element is inline |
clickable
|
boolean
|
false
| — | No | Determines if the element can be activated on click |
position
|
string
|
top
| — | No | Determines the element position |
show_delay
|
integer
|
0
| — | No | Delay before showing (ms) |
hide_delay
|
integer
|
200
| — | No | Delay before hiding (ms) |
variant
|
string
|
base
|
defaultshadowborderedgradientbase
| No | Determines the style |
color
|
string
|
natural
|
basenaturalwhiteprimarysecondarydarksuccesswarningdangerinfosilvermiscdawn
| No | Determines color theme |
rounded
|
string
|
medium
|
extra_smallsmallmediumlargeextra_largenone
| No | Determines the border radius |
show_arrow
|
boolean
|
true
| — | No | Show or hide arrow of popover |
border
|
string
|
extra_small
| — | No | Determines border style |
size
|
string
|
small
|
extra_smallsmallmediumlargeextra_large
| No | Determines the overall size of the elements |
space
|
string
| — |
extra_smallsmallmediumlargeextra_large
| No | Space between items |
width
|
string
|
fit
| — | No | Determines the element width |
text_position
|
string
|
start
| — | No | Determines the element's text position |
font_weight
|
string
|
font-normal
| — | No | Determines custom class for the font weight |
padding
|
string
|
small
|
extra_smallsmallmediumlargeextra_large
| No | Determines padding for items |
content_class
|
string
| — | — | No | Additional CSS classes for popover content |
trigger_class
|
string
| — | — | No | Additional CSS classes for popover content |
arrow_class
|
string
| — | — | No | Additional CSS classes for arrow |
rest
|
global
| — | — | No | Global attributes |
Slots
| Name | Required | Description |
|---|---|---|
inner_block
| No | Inner block that renders HEEx content |
content
| No | — |
trigger
| No | — |
Attributes of the content slot
| Name | Type | Default | Values | Required | Description |
|---|---|---|---|---|---|
class
|
any
| — | — | No | Custom CSS class for additional styling |
Attributes of the trigger slot
| Name | Type | Default | Values | Required | Description |
|---|---|---|---|---|---|
class
|
any
| — | — | No | Custom CSS class for additional styling |
Options
Each option takes one or more of its values, separated by commas.
| Option | Values |
|---|---|
--variant
|
defaultshadowborderedgradientbase
|
--color
|
basenaturalwhiteprimarysecondarydarksuccesswarningdangerinfosilvermiscdawn
|
--size
|
extra_smallsmallmediumlargeextra_large
|
--padding
|
extra_smallsmallmediumlargeextra_large
|
--rounded
|
extra_smallsmallmediumlargeextra_largenone
|
--space
|
extra_smallsmallmediumlargeextra_large
|
--type
|
popover
|
--module
| A module name of your own |
What it generates
mix mishka.ui.gen.component popover