Overview of the Phoenix and LiveView Tooltip Component
The Mishka Chelekom tooltip component is a Phoenix LiveView component that allows developers to create dynamic and customizable tooltips, perfect for providing contextual information when users hover over or focus on elements. It offers flexibility in positioning, color, and size, allowing for seamless integration within applications.
This Phoenix LiveView component also supports customizable triggers, colors, and styles, making it ideal for enhancing user guidance without cluttering the interface. With its responsive design and ease of use, this tooltip component improves the overall user experience.
By using the class prop, you can apply custom classes or Tailwind CSS classes to customize the components design.
Default Variant
The default style of the Mishka Chelekom tooltip applies a solid background and border that change based on user interaction, making it perfect for delivering important notifications. With just a single setting, you can select from a range of color options, ensuring easy customization to match various design styles.
<.tooltip text="Tooltip text" color="white"> <.button>tooltip</.button> </.tooltip> <.tooltip text="Tooltip text" color="primary"> <.button>tooltip</.button> </.tooltip> <.tooltip text="Tooltip text" color="secondary"> <.button>tooltip</.button> </.tooltip> <.tooltip text="Tooltip text" color="dark"> <.button>tooltip</.button> </.tooltip> <.tooltip text="Tooltip text" color="success"> <.button>tooltip</.button> </.tooltip> <.tooltip text="Tooltip text" color="warning"> <.button>tooltip</.button> </.tooltip> <.tooltip text="Tooltip text" color="danger"> <.button>tooltip</.button> </.tooltip> <.tooltip text="Tooltip text" color="info"> <.button>tooltip</.button> </.tooltip> <.tooltip text="Tooltip text" color="light"> <.button>tooltip</.button> </.tooltip> <.tooltip text="Tooltip text" color="misc"> <.button>tooltip</.button> </.tooltip> <.tooltip text="Tooltip text" color="dawn"> <.button>tooltip</.button> </.tooltip>
Shadow Variant
The shadow variant of the Mishka Chelekom tooltip is similar to the default variant, but it also includes a subtle shadow along with a border and white background in light mode.
<.tooltip text="Tooltip text" color="white" variant="outline"> <.button>tooltip</.button> </.tooltip> <.tooltip text="Tooltip text" color="primary" variant="outline"> <.button>tooltip</.button> </.tooltip> <.tooltip text="Tooltip text" color="secondary" variant="outline"> <.button>tooltip</.button> </.tooltip> <.tooltip text="Tooltip text" color="dark" variant="outline"> <.button>tooltip</.button> </.tooltip> <.tooltip text="Tooltip text" color="success" variant="outline"> <.button>tooltip</.button> </.tooltip> <.tooltip text="Tooltip text" color="warning" variant="outline"> <.button>tooltip</.button> </.tooltip> <.tooltip text="Tooltip text" color="danger" variant="outline"> <.button>tooltip</.button> </.tooltip> <.tooltip text="Tooltip text" color="info" variant="outline"> <.button>tooltip</.button> </.tooltip> <.tooltip text="Tooltip text" color="light" variant="outline"> <.button>tooltip</.button> </.tooltip> <.tooltip text="Tooltip text" color="misc" variant="outline"> <.button>tooltip</.button> </.tooltip> <.tooltip text="Tooltip text" color="dawn" variant="outline"> <.button>tooltip</.button> </.tooltip>
Padding prop
The padding prop allows developers to control the internal spacing around the content within the component. The
padding
prop accepts values such as
extra_small
,
small
,
medium
,
large
,
extra_large
, and
none
, offering flexibility in adjusting the space around the content to meet specific design needs.
<.tooltip text="Tooltip extra small padding" padding="extra_small"> <.button>Extra Small</.button> </.tooltip> <.tooltip text="Tooltip small padding" padding="small"> <.button>Small</.button> </.tooltip> <.tooltip text="Tooltip medium padding" padding="medium"> <.button>Medium</.button> </.tooltip> <.tooltip text="Tooltip large padding" padding="large"> <.button>Large</.button> </.tooltip> <.tooltip text="Tooltip extra large padding" padding="extra_large"> <.button>Extra Large</.button> </.tooltip> <.tooltip text="Tooltip No padding" padding="none"> <.button>None</.button> </.tooltip>
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.
<.tooltip text="Tooltip extra small radius" rounded="extra_small"> <.button>Extra Small</.button> </.tooltip> <.tooltip text="Tooltip small radius" rounded="small"> <.button>Small</.button> </.tooltip> <.tooltip text="Tooltip medium radius" rounded="medium"> <.button>Medium</.button> </.tooltip> <.tooltip text="Tooltip large radius" rounded="large"> <.button>Large</.button> </.tooltip> <.tooltip text="Tooltip extra large radius" rounded="extra_large"> <.button>Extra Large</.button> </.tooltip> <.tooltip text="Tooltip No radius" rounded="None"> <.button>None</.button> </.tooltip>
Size prop in Phoenix LiveView tooltip component
The size prop provides control over the overall dimensions of the component, including font size and width. The
size
prop supports predefined values such as
extra_small
for compact elements,
small
,
medium
,
large
, and
extra_large
for larger components, with each size affecting both the text and the width. For more granular control, you can pass custom values directly, ensuring that the component's size fits specific design or layout needs. If no size is specified, it defaults to
medium
, ensuring a balanced appearance by default.
<.tooltip text="Tooltip extra small size" size="extra_small"> <.button>Extra Small Size</.button> </.tooltip> <.tooltip text="Tooltip small size" size="small"> <.button>Small Size</.button> </.tooltip> <.tooltip text="Tooltip medium size" size="medium"> <.button>Medium Size</.button> </.tooltip> <.tooltip text="Tooltip large size" size="large"> <.button>Large Size</.button> </.tooltip> <.tooltip text="Tooltip extra large size" size="extra_large"> <.button>Extra Large Size</.button> </.tooltip>
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. Additionally, you can use the value
fit
to allow the width to adjust based on the content, or pass a custom value directly for precise control. This flexibility helps maintain a consistent and responsive layout across different components and screen sizes.
<.tooltip text="Tooltip extra small width" width="extra_small"> <.button>Extra Small Width</.button> </.tooltip> <.tooltip text="Tooltip small width" width="small"> <.button>Small Width</.button> </.tooltip> <.tooltip text="Tooltip medium width" width="medium"> <.button>Medium Width</.button> </.tooltip> <.tooltip text="Tooltip large width" width="large"> <.button>Large Width</.button> </.tooltip> <.tooltip text="Tooltip extra large width" width="extra_large"> <.button>Extra Large Width</.button> </.tooltip> <.tooltip text="Tooltip fit width" width="fit"> <.button>Fit Width</.button> </.tooltip>
Text prop
The text prop is used to define the content that appears within the tooltip. It accepts a string value and is displayed when the user hovers over or focuses on the target element. The content provided through the text prop will be shown in the tooltip's designated position based on the component's configuration, such as size, color, and position. By allowing developers to set the text dynamically, the tooltip becomes a flexible tool for providing additional information without overwhelming the main UI. If no value is provided, the tooltip will display an empty string by default.
<.tooltip text="This is a tooltip text prop example"> <.button>Hover me</.button> </.tooltip> <.tooltip text="Another small text for tooltip"> <.button>Small text</.button> </.tooltip> <.tooltip text="Hover to see this tooltip"> <.button>Hover here</.button> </.tooltip> <.tooltip text="The text prop defines the tooltip's content"> <.button>See text prop</.button> </.tooltip>
Position prop in Phoenix LiveView tooltip component
The position prop in the tooltip component controls where the tooltip will appear relative to the target element. It accepts values such as
"top"
,
"bottom"
,
"left"
, and
"right"
, with
"top"
being the default. Depending on the chosen position, the tooltip is placed either above, below, to the left, or to the right of the element, and the tooltip arrow is adjusted accordingly. For example, when the position is
"top"
, the tooltip will appear above the element with the arrow pointing down, while selecting
"bottom"
places the tooltip below with the arrow pointing up. This allows for flexible positioning to suit various layouts.
<.tooltip text="Tooltip positioned at the top" position="top"> <.button>Top Position</.button> </.tooltip> <.tooltip text="Tooltip positioned at the bottom" position="bottom"> <.button>Bottom Position</.button> </.tooltip> <.tooltip text="Tooltip positioned at the left" position="left"> <.button>Left Position</.button> </.tooltip> <.tooltip text="Tooltip positioned at the right" position="right"> <.button>Right Position</.button> </.tooltip>
Text Position prop in Phoenix LiveView tooltip component
The text_position prop allows developers to control the alignment of the text within the tooltip. It accepts several values, including
"left"
,
"right"
,
"center"
(which is the default),
"justify"
,
"start"
, and
"end"
. For example, using
"left"
will align the text to the left, while
"center"
centers the text within the tooltip. This prop provides flexibility in presenting the text in a way that best suits the design and layout of the application.
<.tooltip text="Text positioned to the left" text_position="left"> <.button>Left Text Position</.button> </.tooltip> <.tooltip text="Text positioned to the right" text_position="right"> <.button>Right Text Position</.button> </.tooltip> <.tooltip text="Text positioned in the center" text_position="center"> <.button>Center Text Position</.button> </.tooltip> <.tooltip text="Text justified" text_position="justify"> <.button>Justified Text</.button> </.tooltip> <.tooltip text="Text starting position" text_position="start"> <.button>Start Text Position</.button> </.tooltip> <.tooltip text="Text ending position" text_position="end"> <.button>End Text Position</.button> </.tooltip>
Font Weight prop
The
font_weight
prop allows developers to customize the font weight of the text inside the tooltip by using Tailwind CSS's built-in font weight classes. For instance, users can apply classes like
font-normal
,
font-bold
, or
font-extrabold
, among others, to adjust the thickness and emphasis of the text. This flexibility enables developers to ensure that the tooltip’s text aligns with the overall typography and design of their application.
<.tooltip text="Thin font weight" font_weight="font-thin"> <.button>Thin Font</.button> </.tooltip> <.tooltip text="Light font weight" font_weight="font-light"> <.button>Light Font</.button> </.tooltip> <.tooltip text="Normal font weight" font_weight="font-normal"> <.button>Normal Font</.button> </.tooltip> <.tooltip text="Medium font weight" font_weight="font-medium"> <.button>Medium Font</.button> </.tooltip> <.tooltip text="Semibold font weight" font_weight="font-semibold"> <.button>Semibold Font</.button> </.tooltip> <.tooltip text="Bold font weight" font_weight="font-bold"> <.button>Bold Font</.button> </.tooltip> <.tooltip text="Extrabold font weight" font_weight="font-extrabold"> <.button>Extrabold Font</.button> </.tooltip>