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. It provides flexibility in design, with options to adjust size, color, position, and rounded borders, ensuring a smooth and polished user interface.
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.
By using the class prop, you can apply custom classes or Tailwind CSS classes to customize the components design.
Note: If you want to use a clickable popover, apply the
clickable
prop to the
popover
, and make sure to provide a
trigger_id
prop to the
popover_trigger
, which should match the unique ID of the
popover_content
you want to display
(See more)
inline
prop to the
popover
component.
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
popover_trigger
component. After setting the trigger, you define the content to be displayed inside the
popover_content
component. This content can include text, images, or any other HTML elements you want to show when the popover is triggered.
<!--This popover is clickable --> <!--so use a unique ID for the content, and reference that ID in the trigger_id --> <.popover clickable> <.popover_trigger trigger_id="uniqu_id"> <.button color="dawn" size="small">popover trigger</.button> </.popover_trigger> <.popover_content id="uniqu_id" rounded="small" width="large" color="dawn" padding="small" > Content within popover content component </.popover_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.
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
About Amsterdam
Amsterdam, the capital of the Netherlands, is known for its scenic canals, vibrant culture, and rich history. Amsterdam offers a perfect mix of historic charm and modern energy, making it a top destination for culture and relaxation.
, 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 inline> <.popover_trigger inline class="your_classes">Mishka Chelekom</.popover_trigger> <.popover_contentinline> <span class="p-4 block"> <span class="text-lg font-semibold block">About Mishka Chelekom</span> </span> </.popover_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> <.popover_trigger inline trigger_id="unique_id">Mishka Chelekom</.popover_trigger> <.popover_content inline id="unique_id" > <span class="p-4 block"> <span class="text-lg font-semibold block">About Mishka Chelekom</span> </span> </.popover_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 specific element. To achieve this, you need to assign a unique ID to the
popover_content
and use that same ID in the
trigger_id
prop of the
popover_trigger
. This connection ensures that when the trigger element is clicked, the corresponding popover content is displayed. By using the
clickable
prop, you create an interactive and intuitive experience for users.
<.popover clickable> <.popover_trigger trigger_id="unique_id"></.popover_trigger> <.popover_content id="unique_id"></.popover_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.
<!--By default show_arrow is true--> <.popover> <.popover_trigger></.popover_trigger> <.popover_content show_arrow={false}></.popover_content> </.popover> <.popover> <.popover_trigger></.popover_trigger> <.popover_content show_arrow={true}></.popover_content> </.popover>
Popover content default Variant
The default style of the Mishka Chelekom popover applies a solid background. It is the default variant of popover component.
<.popover> <.popover_trigger class="your_classes"></.popover_trigger> <.popover_content color="white"></.popover_content> </.popover> <.popover> <.popover_trigger class="your_classes"></.popover_trigger> <.popover_content color="primary"></.popover_content> </.popover> <.popover> <.popover_trigger class="your_classes"></.popover_trigger> <.popover_content color="secondary"></.popover_content> </.popover> <.popover> <.popover_trigger class="your_classes"></.popover_trigger> <.popover_content color="dark"></.popover_content> </.popover> <.popover> <.popover_trigger class="your_classes"></.popover_trigger> <.popover_content color="success"></.popover_content> </.popover> <.popover> <.popover_trigger class="your_classes"></.popover_trigger> <.popover_content color="warning"></.popover_content> </.popover> <.popover> <.popover_trigger class="your_classes"></.popover_trigger> <.popover_content color="danger"></.popover_content> </.popover> <.popover> <.popover_trigger class="your_classes"></.popover_trigger> <.popover_content color="info"></.popover_content> </.popover> <.popover> <.popover_trigger class="your_classes"></.popover_trigger> <.popover_content color="silver"></.popover_content> </.popover> <.popover> <.popover_trigger class="your_classes"></.popover_trigger> <.popover_content color="misc"></.popover_content> </.popover> <.popover> <.popover_trigger class="your_classes"></.popover_trigger> <.popover_content color="dawn"></.popover_content> </.popover>
Popover content shadow Variant
The shadow variant of the Mishka Chelekom popover is similar to the default variant, but it also includes a shadow.
<.popover> <.popover_trigger class="your_classes"></.popover_trigger> <.popover_content variant="shadow" color="primary"></.popover_content> </.popover> <.popover> <.popover_trigger class="your_classes"></.popover_trigger> <.popover_content variant="shadow" color="secondary"></.popover_content> </.popover> <.popover> <.popover_trigger class="your_classes"></.popover_trigger> <.popover_content variant="shadow" color="success"></.popover_content> </.popover> <.popover> <.popover_trigger class="your_classes"></.popover_trigger> <.popover_content variant="shadow" color="warning"></.popover_content> </.popover> <.popover> <.popover_trigger class="your_classes"></.popover_trigger> <.popover_content variant="shadow" color="danger"></.popover_content> </.popover> <.popover> <.popover_trigger class="your_classes"></.popover_trigger> <.popover_content variant="shadow" color="info"></.popover_content> </.popover> <.popover> <.popover_trigger class="your_classes"></.popover_trigger> <.popover_content variant="shadow" color="silver"></.popover_content> </.popover> <.popover> <.popover_trigger class="your_classes"></.popover_trigger> <.popover_content variant="shadow" color="misc"></.popover_content> </.popover> <.popover> <.popover_trigger class="your_classes"></.popover_trigger> <.popover_content variant="shadow" color="dawn"></.popover_content> </.popover>
Popover content 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> <.popover_trigger class="your_classes"></.popover_trigger> <.popover_content variant="bordered" color="white"></.popover_content> </.popover> <.popover> <.popover_trigger class="your_classes"></.popover_trigger> <.popover_content variant="bordered" color="primary"></.popover_content> </.popover> <.popover> <.popover_trigger class="your_classes"></.popover_trigger> <.popover_content variant="bordered" color="secondary"></.popover_content> </.popover> <.popover> <.popover_trigger class="your_classes"></.popover_trigger> <.popover_content variant="bordered" color="dark"></.popover_content> </.popover> <.popover> <.popover_trigger class="your_classes"></.popover_trigger> <.popover_content variant="bordered" color="success"></.popover_content> </.popover> <.popover> <.popover_trigger class="your_classes"></.popover_trigger> <.popover_content variant="bordered" color="warning"></.popover_content> </.popover> <.popover> <.popover_trigger class="your_classes"></.popover_trigger> <.popover_content variant="bordered" color="danger"></.popover_content> </.popover> <.popover> <.popover_trigger class="your_classes"></.popover_trigger> <.popover_content variant="bordered" color="info"></.popover_content> </.popover> <.popover> <.popover_trigger class="your_classes"></.popover_trigger> <.popover_content variant="bordered" color="silver"></.popover_content> </.popover> <.popover> <.popover_trigger class="your_classes"></.popover_trigger> <.popover_content variant="bordered" color="misc"></.popover_content> </.popover> <.popover> <.popover_trigger class="your_classes"></.popover_trigger> <.popover_content variant="bordered" color="dawn"></.popover_content> </.popover>
Popover content gradient Variant
The gradient variant of the Mishka Chelekom card has gradients in various colors.
<.popover> <.popover_trigger class="your_classes"></.popover_trigger> <.popover_content variant="gradient" color="primary"></.popover_content> </.popover> <.popover> <.popover_trigger class="your_classes"></.popover_trigger> <.popover_content variant="gradient" color="secondary"></.popover_content> </.popover> <.popover> <.popover_trigger class="your_classes"></.popover_trigger> <.popover_content variant="gradient" color="success"></.popover_content> </.popover> <.popover> <.popover_trigger class="your_classes"></.popover_trigger> <.popover_content variant="gradient" color="warning"></.popover_content> </.popover> <.popover> <.popover_trigger class="your_classes"></.popover_trigger> <.popover_content variant="gradient" color="danger"></.popover_content> </.popover> <.popover> <.popover_trigger class="your_classes"></.popover_trigger> <.popover_content variant="gradient" color="info"></.popover_content> </.popover> <.popover> <.popover_trigger class="your_classes"></.popover_trigger> <.popover_content variant="gradient" color="silver"></.popover_content> </.popover> <.popover> <.popover_trigger class="your_classes"></.popover_trigger> <.popover_content variant="gradient" color="misc"></.popover_content> </.popover> <.popover> <.popover_trigger class="your_classes"></.popover_trigger> <.popover_content variant="gradient" color="dawn"></.popover_content> </.popover>
Popover content 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.
<!--The position is set to top by default, you don't need to specify it.--> <.popover> <.popover_trigger class="your_classes"></.popover_trigger> <.popover_content></.popover_content> </.popover> <.popover> <.popover_trigger class="your_classes"></.popover_trigger> <.popover_content position="bottom"></.popover_content> </.popover> <.popover> <.popover_trigger class="your_classes"></.popover_trigger> <.popover_content position="left"></.popover_content> </.popover> <.popover> <.popover_trigger class="your_classes"></.popover_trigger> <.popover_content position="right"></.popover_content> </.popover>
Popover content 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> <.popover_trigger class="your_classes"></.popover_trigger> <.popover_content size="extra_small"></.popover_content> </.popover> <.popover> <.popover_trigger class="your_classes"></.popover_trigger> <.popover_content size="small"></.popover_content> </.popover> <.popover> <.popover_trigger class="your_classes"></.popover_trigger> <.popover_content size="medium"></.popover_content> </.popover> <.popover> <.popover_trigger class="your_classes"></.popover_trigger> <.popover_content size="large"></.popover_content> </.popover> <.popover> <.popover_trigger class="your_classes"></.popover_trigger> <.popover_content size="extra_large"></.popover_content> </.popover>
Popover content 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-contents.
<.popover> <.popover_trigger class="your_classes"></.popover_trigger> <.popover_content size="extra_small"></.popover_content> </.popover> <.popover> <.popover_trigger class="your_classes"></.popover_trigger> <.popover_content size="small"></.popover_content> </.popover> <.popover> <.popover_trigger class="your_classes"></.popover_trigger> <.popover_content size="medium"></.popover_content> </.popover> <.popover> <.popover_trigger class="your_classes"></.popover_trigger> <.popover_content size="large"></.popover_content> </.popover> <.popover> <.popover_trigger class="your_classes"></.popover_trigger> <.popover_content size="extra_large"></.popover_content> </.popover>
Popover content 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> <.popover_trigger class="your_classes"></.popover_trigger> <.popover_content padding="extra_small"></.popover_content> </.popover> <.popover> <.popover_trigger class="your_classes"></.popover_trigger> <.popover_content padding="small"></.popover_content> </.popover> <.popover> <.popover_trigger class="your_classes"></.popover_trigger> <.popover_content padding="medium"></.popover_content> </.popover> <.popover> <.popover_trigger class="your_classes"></.popover_trigger> <.popover_content padding="large"></.popover_content> </.popover> <.popover> <.popover_trigger class="your_classes"></.popover_trigger> <.popover_content padding="extra_large"></.popover_content> </.popover>
Popover content 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> <.popover_trigger class="your_classes"></.popover_trigger> <.popover_content width="extra_small"></.popover_content> </.popover> <.popover> <.popover_trigger class="your_classes"></.popover_trigger> <.popover_content width="small"></.popover_content> </.popover> <.popover> <.popover_trigger class="your_classes"></.popover_trigger> <.popover_content width="medium"></.popover_content> </.popover> <.popover> <.popover_trigger class="your_classes"></.popover_trigger> <.popover_content width="large"></.popover_content> </.popover> <.popover> <.popover_trigger class="your_classes"></.popover_trigger> <.popover_content width="extra_large"></.popover_content> </.popover> <.popover> <.popover_trigger class="your_classes"></.popover_trigger> <.popover_content width="double_large"></.popover_content> </.popover> <.popover> <.popover_trigger class="your_classes"></.popover_trigger> <.popover_content width="triple_large"></.popover_content> </.popover> <.popover> <.popover_trigger class="your_classes"></.popover_trigger> <.popover_content width="quadruple_large"></.popover_content> </.popover>
Popover content 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> <.popover_trigger class="your_classes"></.popover_trigger> <.popover_content rounded="extra_small"></.popover_content> </.popover> <.popover> <.popover_trigger class="your_classes"></.popover_trigger> <.popover_content rounded="small"></.popover_content> </.popover> <.popover> <.popover_trigger class="your_classes"></.popover_trigger> <.popover_content rounded="medium"></.popover_content> </.popover> <.popover> <.popover_trigger class="your_classes"></.popover_trigger> <.popover_content rounded="large"></.popover_content> </.popover> <.popover> <.popover_trigger class="your_classes"></.popover_trigger> <.popover_content rounded="extra_large"></.popover_content> </.popover> <.popover> <.popover_trigger class="your_classes"></.popover_trigger> <.popover_content rounded="none"></.popover_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.
<.popover> <.popover_trigger class="your_classes"></.popover_trigger> <.popover_content text_position="left"></.popover_content> </.popover> <.popover> <.popover_trigger class="your_classes"></.popover_trigger> <.popover_content text_position="right"></.popover_content> </.popover> <.popover> <.popover_trigger class="your_classes"></.popover_trigger> <.popover_content text_position="center"></.popover_content> </.popover> <.popover> <.popover_trigger class="your_classes"></.popover_trigger> <.popover_content text_position="justify"></.popover_content> </.popover> <.popover> <.popover_trigger class="your_classes"></.popover_trigger> <.popover_content text_position="start"></.popover_content> </.popover> <.popover> <.popover_trigger class="your_classes"></.popover_trigger> <.popover_content text_position="end"></.popover_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> <.popover_trigger class="your_classes"></.popover_trigger> <.popover_content font_weight="font-thin"></.popover_content> </.popover> <.popover> <.popover_trigger class="your_classes"></.popover_trigger> <.popover_content font_weight="font-extrasilver"></.popover_content> </.popover> <.popover> <.popover_trigger class="your_classes"></.popover_trigger> <.popover_content font_weight="font-silver"></.popover_content> </.popover> <.popover> <.popover_trigger class="your_classes"></.popover_trigger> <.popover_content font_weight="font-normal"></.popover_content> </.popover> <.popover> <.popover_trigger class="your_classes"></.popover_trigger> <.popover_content font_weight="font-medium"></.popover_content> </.popover> <.popover> <.popover_trigger class="your_classes"></.popover_trigger> <.popover_content font_weight="font-semibold"></.popover_content> </.popover> <.popover> <.popover_trigger class="your_classes"></.popover_trigger> <.popover_content font_weight="font-bold"></.popover_content> </.popover> <.popover> <.popover_trigger class="your_classes"></.popover_trigger> <.popover_content font_weight="font-extrabold"></.popover_content> </.popover> <.popover> <.popover_trigger class="your_classes"></.popover_trigger> <.popover_content font_weight="font-black"></.popover_content> </.popover>