Mishka
Chelekom

Tooltip

v0.0.10

v0.0.10StableComponentStatelessJS-moduleJSApache-2.0
Installation mix mishka.ui.gen.component tooltip
Source View Source

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.

Overview of the Phoenix and LiveView Tooltip Component

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.

Tooltip Triggers

Tooltips can be triggered by various interactive elements. The most common trigger elements are buttons, but tooltips can also be applied to icons, links, images, or any interactive element. The trigger element is placed within the tooltip component using the :trigger slot, and the tooltip will appear when users hover over or focus on the trigger element.

Tooltip Triggers

Hover over me
heex
<.tooltip text="Tooltip text">
  <.button>tooltip</.button>
</.tooltip>

Base color & Variant

Base color & Variant

heex
<.tooltip text="Tooltip text">
  <.button>tooltip</.button>
</.tooltip>

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.

Default Variant

heex
<.tooltip text="Tooltip text" variant="default" color="natural">
  <.button>tooltip</.button>
</.tooltip>

<.tooltip text="Tooltip text" variant="default" color="white">
  <.button>tooltip</.button>
</.tooltip>

<.tooltip text="Tooltip text" variant="default" color="primary">
  <.button>tooltip</.button>
</.tooltip>

<.tooltip text="Tooltip text" variant="default" color="secondary">
  <.button>tooltip</.button>
</.tooltip>

<.tooltip text="Tooltip text" variant="default" color="dark">
  <.button>tooltip</.button>
</.tooltip>

<.tooltip text="Tooltip text" variant="default" color="success">
  <.button>tooltip</.button>
</.tooltip>

<.tooltip text="Tooltip text" variant="default" color="warning">
  <.button>tooltip</.button>
</.tooltip>

<.tooltip text="Tooltip text" variant="default" color="danger">
  <.button>tooltip</.button>
</.tooltip>

<.tooltip text="Tooltip text" variant="default" color="info">
  <.button>tooltip</.button>
</.tooltip>

<.tooltip text="Tooltip text" variant="default" color="silver">
  <.button>tooltip</.button>
</.tooltip>

<.tooltip text="Tooltip text" variant="default" color="misc">
  <.button>tooltip</.button>
</.tooltip>

<.tooltip text="Tooltip text" variant="default" color="dawn">
  <.button>tooltip</.button>
</.tooltip>

bordered Variant

The bordered variant of the Mishka Chelekom tooltip 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.

bordered Variant

heex
<.tooltip text="Tooltip text" color="natural" variant="bordered">
  <.button>tooltip</.button>
</.tooltip>

<.tooltip text="Tooltip text" color="primary" variant="bordered">
  <.button>tooltip</.button>
</.tooltip>

<.tooltip text="Tooltip text" color="secondary" variant="bordered">
  <.button>tooltip</.button>
</.tooltip>

<.tooltip text="Tooltip text" color="success" variant="bordered">
  <.button>tooltip</.button>
</.tooltip>

<.tooltip text="Tooltip text" color="warning" variant="bordered">
  <.button>tooltip</.button>
</.tooltip>

<.tooltip text="Tooltip text" color="danger" variant="bordered">
  <.button>tooltip</.button>
</.tooltip>

<.tooltip text="Tooltip text" color="info" variant="bordered">
  <.button>tooltip</.button>
</.tooltip>

<.tooltip text="Tooltip text" color="silver" variant="bordered">
  <.button>tooltip</.button>
</.tooltip>

<.tooltip text="Tooltip text" color="misc" variant="bordered">
  <.button>tooltip</.button>
</.tooltip>

<.tooltip text="Tooltip text" color="dawn" variant="bordered">
  <.button>tooltip</.button>
</.tooltip>

gradient Variant

The gradient variant of the Mishka Chelekom tooltip has gradients in various colors.

gradient Variant

heex
<.tooltip text="Tooltip text" color="natural" variant="gradient">
  <.button>tooltip</.button>
</.tooltip>

<.tooltip text="Tooltip text" color="primary" variant="gradient">
  <.button>tooltip</.button>
</.tooltip>

<.tooltip text="Tooltip text" color="secondary" variant="gradient">
  <.button>tooltip</.button>
</.tooltip>

<.tooltip text="Tooltip text" color="success" variant="gradient">
  <.button>tooltip</.button>
</.tooltip>

<.tooltip text="Tooltip text" color="warning" variant="gradient">
  <.button>tooltip</.button>
</.tooltip>

<.tooltip text="Tooltip text" color="danger" variant="gradient">
  <.button>tooltip</.button>
</.tooltip>

<.tooltip text="Tooltip text" color="info" variant="gradient">
  <.button>tooltip</.button>
</.tooltip>

<.tooltip text="Tooltip text" color="silver" variant="gradient">
  <.button>tooltip</.button>
</.tooltip>

<.tooltip text="Tooltip text" color="misc" variant="gradient">
  <.button>tooltip</.button>
</.tooltip>

<.tooltip text="Tooltip text" color="dawn" variant="gradient">
  <.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.

Shadow Variant

heex
<.tooltip text="Tooltip text" color="natural" variant="shadow">
  <.button>tooltip</.button>
</.tooltip>

<.tooltip text="Tooltip text" color="primary" variant="shadow">
  <.button>tooltip</.button>
</.tooltip>

<.tooltip text="Tooltip text" color="secondary" variant="shadow">
  <.button>tooltip</.button>
</.tooltip>

<.tooltip text="Tooltip text" color="success" variant="shadow">
  <.button>tooltip</.button>
</.tooltip>

<.tooltip text="Tooltip text" color="warning" variant="shadow">
  <.button>tooltip</.button>
</.tooltip>

<.tooltip text="Tooltip text" color="danger" variant="shadow">
  <.button>tooltip</.button>
</.tooltip>

<.tooltip text="Tooltip text" color="info" variant="shadow">
  <.button>tooltip</.button>
</.tooltip>

<.tooltip text="Tooltip text" color="silver" variant="shadow">
  <.button>tooltip</.button>
</.tooltip>

<.tooltip text="Tooltip text" color="misc" variant="shadow">
  <.button>tooltip</.button>
</.tooltip>

<.tooltip text="Tooltip text" color="dawn" variant="shadow">
  <.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.

Padding prop

heex
<.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 rounded-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.

Rounded prop

heex
<.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="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.

Size prop in Phoenix LiveView tooltip component

heex
<.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.

Width prop

heex
<.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.

Text prop

heex
<.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.

Position prop in Phoenix LiveView tooltip component

heex
<.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.

Text Position prop in Phoenix LiveView tooltip component

heex
<.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.

Font Weight prop

heex
<.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>

Clickable prop

The clickable prop allows you to change the tooltip trigger behavior from hover to click. When set to true, the tooltip will show and hide on click events instead of the default hover behavior. This is particularly useful for mobile devices or when you want users to explicitly interact with the tooltip. By default, this prop is set to false, maintaining the traditional hover behavior.

Clickable prop

Click me to see tooltip
Inline clickable tooltip
heex
<.tooltip
  position="top"
  text="This is a clickable tooltip"
  width="min-w-40"
  rounded="large"
  size="extra_small"
  variant="default"
  clickable
  color="info"
>
  <:trigger>
    <span class="cursor-pointer">Click me to see tooltip</span>
  </:trigger>
</.tooltip>

<.tooltip
  position="bottom"
  text="Click tooltip with inline display"
  width="min-w-32"
  rounded="medium"
  size="small"
  variant="shadow"
  clickable
  inline
  color="primary"
>
  <:trigger>
    <span class="cursor-pointer text-blue-600 underline">Inline clickable tooltip</span>
  </:trigger>
</.tooltip>

<.tooltip
  position="right"
  text="Another clickable example"
  width="large"
  rounded="small"
  size="medium"
  variant="bordered"
  clickable
  color="success"
>
  <:trigger>
    <button class="bg-green-500 text-white px-4 py-2 rounded">Click for tooltip</button>
  </:trigger>
</.tooltip>

Inline prop

The inline prop determines whether the tooltip wrapper should be displayed as an inline element or a block element. When set to true, the tooltip wrapper will use a span element instead of a div, making it suitable for inline content such as text within paragraphs or other inline elements. By default, this prop is set to false, using a block-level div wrapper.

Show arrow prop

show_arrow is a boolean attribute that allows you to control the visibility of the arrow in the tooltip component. When set to true, the arrow will be displayed, providing a visual indicator of the tooltip'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 tooltip can adapt to various use cases and design requirements.

Show arrow prop

heex
<.tooltip
  text="Content"
  color="dark"
  show_arrow={false}
>
  <.button color="secondary" size="small">
    Trigger
  </.button>
</.tooltip>