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.
Send us feedbacks
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
About Digital Photography
Digital photography revolutionized image capture with instant results and endless creative possibilities. Modern cameras offer advanced features like high ISO performance, rapid autofocus, and professional-grade image quality, making photography more accessible than ever.
, 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.
inline
prop to the
popover
component.
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)
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.
Mishka chelekom dropdown popover
trigger
and
content
slots for adding content within a popover. It also supports
popover_trigger
and
popover_content
, and you can see the props in the props tab.
<!--This popover is clickable --> <!--so use a unique ID for the content, and reference that ID in the trigger_id --> <.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 popover_trigger and popover_content --> <.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> <: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> <:trigger trigger_id="unique_id">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.
Activity growth - Incremental
Report helps navigate cumulative growth of community activities Ideally, the chart should have a growing trend, as stagnating chart signifies a significant decrease of community activity
Calculation
For each date bucket, the all-time volume of activities is calculated This means that activities in period n contain all activities up to period n, plus the activities generated by your community in period
See more..<.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.
<!--By default show_arrow is true--> <.popover> <:trigger></:trigger> <:content show_arrow={false}></:content> </.popover> <.popover> <:trigger></:trigger> <:content show_arrow={true}></:content> </.popover>
Popover content base Variant
<.popover> <:trigger class="your_classes"></:trigger> <:content></: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 color="white"> <:trigger class="your_classes"></:trigger> <:content></:content> </.popover> <.popover color="primary"> <:trigger class="your_classes"></:trigger> <:content></:content> </.popover> <.popover color="secondary"> <:trigger class="your_classes"></:trigger> <:content></:content> </.popover> <.popover color="dark"> <:trigger class="your_classes"></:trigger> <:content></:content> </.popover> <.popover color="success"> <:trigger class="your_classes"></:trigger> <:content></:content> </.popover> <.popover color="warning"> <:trigger class="your_classes"></:trigger> <:content></:content> </.popover> <.popover color="danger"> <:trigger class="your_classes"></:trigger> <:content></:content> </.popover> <.popover color="info"> <:trigger class="your_classes"></:trigger> <:content></:content> </.popover> <.popover color="silver"> <:trigger class="your_classes"></:trigger> <:content></:content> </.popover> <.popover color="misc"> <:trigger class="your_classes"></:trigger> <:content></:content> </.popover> <.popover color="dawn"> <:trigger class="your_classes"></:trigger> <:content></: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 variant="shadow" color="primary"> <:trigger class="your_classes"></:trigger> <:content></:content> </.popover> <.popover variant="shadow" color="secondary"> <:trigger class="your_classes"></:trigger> <:content></:content> </.popover> <.popover variant="shadow" color="success"> <:trigger class="your_classes"></:trigger> <:content></:content> </.popover> <.popover variant="shadow" color="warning"> <:trigger class="your_classes"></:trigger> <:content></:content> </.popover> <.popover variant="shadow" color="danger"> <:trigger class="your_classes"></:trigger> <:content></:content> </.popover> <.popover variant="shadow" color="info"> <:trigger class="your_classes"></:trigger> <:content></:content> </.popover> <.popover variant="shadow" color="silver"> <:trigger class="your_classes"></:trigger> <:content></:content> </.popover> <.popover variant="shadow" color="misc"> <:trigger class="your_classes"></:trigger> <:content></:content> </.popover> <.popover variant="shadow" color="dawn"> <:trigger class="your_classes"></:trigger> <:content></: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 variant="bordered" color="white"> <:trigger class="your_classes"></:trigger> <:content></:content> </.popover> <.popover variant="bordered" color="primary"> <:trigger class="your_classes"></:trigger> <:content></:content> </.popover> <.popover variant="bordered" color="secondary"> <:trigger class="your_classes"></:trigger> <:content></:content> </.popover> <.popover variant="bordered" color="dark"> <:trigger class="your_classes"></:trigger> <:content></:content> </.popover> <.popover variant="bordered" color="success"> <:trigger class="your_classes"></:trigger> <:content></:content> </.popover> <.popover variant="bordered" color="warning"> <:trigger class="your_classes"></:trigger> <:content></:content> </.popover> <.popover variant="bordered" color="danger"> <:trigger class="your_classes"></:trigger> <:content></:content> </.popover> <.popover variant="bordered" color="info"> <:trigger class="your_classes"></:trigger> <:content></:content> </.popover> <.popover variant="bordered" color="silver"> <:trigger class="your_classes"></:trigger> <:content></:content> </.popover> <.popover variant="bordered" color="misc"> <:trigger class="your_classes"></:trigger> <:content></:content> </.popover> <.popover variant="bordered" color="dawn"> <:trigger class="your_classes"></:trigger> <:content></:content> </.popover>
Popover content gradient Variant
The gradient variant of the Mishka Chelekom popover has gradients in various colors.
<.popover variant="gradient" color="primary"> <:trigger class="your_classes"></:trigger> <:content></:content> </.popover> <.popover variant="gradient" color="secondary"> <:trigger class="your_classes"></:trigger> <:content></:content> </.popover> <.popover variant="gradient" color="success"> <:trigger class="your_classes"></:trigger> <:content></:content> </.popover> <.popover variant="gradient" color="warning"> <:trigger class="your_classes"></:trigger> <:content></:content> </.popover> <.popover variant="gradient" color="danger"> <:trigger class="your_classes"></:trigger> <:content></:content> </.popover> <.popover variant="gradient" color="info"> <:trigger class="your_classes"></:trigger> <:content></:content> </.popover> <.popover variant="gradient" color="silver"> <:trigger class="your_classes"></:trigger> <:content></:content> </.popover> <.popover variant="gradient" color="misc"> <:trigger class="your_classes"></:trigger> <:content></:content> </.popover> <.popover variant="gradient" color="dawn"> <:trigger class="your_classes"></:trigger> <:content></: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> <:trigger class="your_classes"></:trigger> <:content></:content> </.popover> <.popover position="bottom"> <:trigger class="your_classes"></:trigger> <:content></:content> </.popover> <.popover position="left"> <:trigger class="your_classes"></:trigger> <:content></:content> </.popover> <.popover position="right"> <:trigger class="your_classes"></:trigger> <:content></: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 size="extra_small"> <:trigger class="your_classes"></:trigger> <:content></:content> </.popover> <.popover size="small"> <:trigger class="your_classes"></:trigger> <:content></:content> </.popover> <.popover size="medium"> <:trigger class="your_classes"></:trigger> <:content></:content> </.popover> <.popover size="large"> <:trigger class="your_classes"></:trigger> <:content></:content> </.popover> <.popover size="extra_large"> <:trigger class="your_classes"></:trigger> <:content></: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 content.
<.popover space="extra_small"> <:trigger class="your_classes"></:trigger> <:content></:content> </.popover> <.popover space="small"> <:trigger class="your_classes"></:trigger> <:content></:content> </.popover> <.popover space="medium"> <:trigger class="your_classes"></:trigger> <:content></:content> </.popover> <.popover space="large"> <:trigger class="your_classes"></:trigger> <:content></:content> </.popover> <.popover space="extra_large"> <:trigger class="your_classes"></:trigger> <:content></: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 padding="extra_small"> <:trigger class="your_classes"></:trigger> <:content></:content> </.popover> <.popover padding="small"> <:trigger class="your_classes"></:trigger> <:content></:content> </.popover> <.popover padding="medium"> <:trigger class="your_classes"></:trigger> <:content></:content> </.popover> <.popover padding="large"> <:trigger class="your_classes"></:trigger> <:content></:content> </.popover> <.popover padding="extra_large"> <:trigger class="your_classes"></:trigger> <:content></: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 width="extra_small"> <:trigger class="your_classes"></:trigger> <:content></:content> </.popover> <.popover width="small"> <:trigger class="your_classes"></:trigger> <:content></:content> </.popover> <.popover width="medium"> <:trigger class="your_classes"></:trigger> <:content></:content> </.popover> <.popover width="large"> <:trigger class="your_classes"></:trigger> <:content></:content> </.popover> <.popover width="extra_large"> <:trigger class="your_classes"></:trigger> <:content></:content> </.popover> <.popover width="double_large"> <:trigger class="your_classes"></:trigger> <:content></:content> </.popover> <.popover width="triple_large"> <:trigger class="your_classes"></:trigger> <:content></:content> </.popover> <.popover width="quadruple_large"> <:trigger class="your_classes"></:trigger> <:content></: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 rounded="extra_small"> <:trigger class="your_classes"></:trigger> <:content></:content> </.popover> <.popover rounded="small"> <:trigger class="your_classes"></:trigger> <:content></:content> </.popover> <.popover rounded="medium"> <:trigger class="your_classes"></:trigger> <:content></:content> </.popover> <.popover rounded="large"> <:trigger class="your_classes"></:trigger> <:content></:content> </.popover> <.popover rounded="extra_large"> <:trigger class="your_classes"></:trigger> <:content></:content> </.popover> <.popover 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.
<.popover text_position="left"> <:trigger class="your_classes"></:trigger> <:content></:content> </.popover> <.popover text_position="right"> <:trigger class="your_classes"></:trigger> <:content></:content> </.popover> <.popover text_position="center"> <:trigger class="your_classes"></:trigger> <:content></:content> </.popover> <.popover text_position="justify"> <:trigger class="your_classes"></:trigger> <:content></:content> </.popover> <.popover text_position="start"> <:trigger class="your_classes"></:trigger> <:content></:content> </.popover> <.popover 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 font_weight="font-thin"> <:trigger class="your_classes"></:trigger> <:content></:content> </.popover> <.popover font_weight="font-normal"> <:trigger class="your_classes"></:trigger> <:content></:content> </.popover>