Light Dark System

Hover Container

<zn-hover-container> | ZnHoverContainer
Since 1.0 experimental

The HoverContainer component is used to display additional information when a user hovers over or clicks on an element.

Hover over me 
<zn-hover-container content="This is helpful information that appears on hover">
  <zn-button slot="anchor">Hover over me</zn-button>
</zn-hover-container>

Examples

Basic Usage

Display content when hovering over an element.

Hover me 
<zn-hover-container content="This is a helpful tooltip">
  <zn-button slot="anchor">Hover me</zn-button>
</zn-hover-container>

Custom Content Slot

Use the content slot for rich HTML content.

Hover for details

Important Information

This is detailed information with formatting.

 
<zn-hover-container>
  <zn-button slot="anchor">Hover for details</zn-button>
  <div slot="content">
    <h4 style="margin: 0 0 5px 0;">Important Information</h4>
    <p style="margin: 0;">This is detailed information with <strong>formatting</strong>.</p>
  </div>
</zn-hover-container>

Different Placements

Control where the hover container appears using the placement attribute.

Top Right Bottom Left 
<div style="display: flex; gap: 20px; flex-wrap: wrap;">
  <zn-hover-container content="Appears on top" placement="top">
    <zn-button slot="anchor">Top</zn-button>
  </zn-hover-container>

  <zn-hover-container content="Appears on right" placement="right">
    <zn-button slot="anchor">Right</zn-button>
  </zn-hover-container>

  <zn-hover-container content="Appears on bottom" placement="bottom">
    <zn-button slot="anchor">Bottom</zn-button>
  </zn-hover-container>

  <zn-hover-container content="Appears on left" placement="left">
    <zn-button slot="anchor">Left</zn-button>
  </zn-hover-container>
</div>

Placement Variations

Use placement variations for more precise positioning.

Top Start Top End Bottom Start Bottom End 
<div style="display: flex; gap: 20px; flex-wrap: wrap;">
  <zn-hover-container content="Top Start" placement="top-start">
    <zn-button slot="anchor">Top Start</zn-button>
  </zn-hover-container>

  <zn-hover-container content="Top End" placement="top-end">
    <zn-button slot="anchor">Top End</zn-button>
  </zn-hover-container>

  <zn-hover-container content="Bottom Start" placement="bottom-start">
    <zn-button slot="anchor">Bottom Start</zn-button>
  </zn-hover-container>

  <zn-hover-container content="Bottom End" placement="bottom-end">
    <zn-button slot="anchor">Bottom End</zn-button>
  </zn-hover-container>
</div>

Click Trigger

Change the trigger to click instead of hover.

Click me 
<zn-hover-container trigger="click" content="Click to toggle this message">
  <zn-button slot="anchor">Click me</zn-button>
</zn-hover-container>

Focus Trigger

Trigger on focus events, useful for form inputs.

<zn-hover-container trigger="focus" content="This field is required and must be a valid email">
  <zn-input slot="anchor" label="Email" placeholder="Enter email"></zn-input>
</zn-hover-container>

Multiple Triggers

Combine multiple trigger types.

<zn-hover-container trigger="hover focus" content="Appears on hover or focus">
  <zn-input slot="anchor" label="Username" placeholder="Enter username"></zn-input>
</zn-hover-container>

Custom Distance

Adjust the distance from the anchor using the distance attribute.

Distance: 0 Distance: 10 Distance: 20 
<div style="display: flex; gap: 20px;">
  <zn-hover-container distance="0" content="No distance">
    <zn-button slot="anchor">Distance: 0</zn-button>
  </zn-hover-container>

  <zn-hover-container distance="10" content="10px distance">
    <zn-button slot="anchor">Distance: 10</zn-button>
  </zn-hover-container>

  <zn-hover-container distance="20" content="20px distance">
    <zn-button slot="anchor">Distance: 20</zn-button>
  </zn-hover-container>
</div>

Skidding

Offset the hover container along the anchor using the skidding attribute.

Skid Left Skid Right 
<div style="display: flex; gap: 20px;">
  <zn-hover-container skidding="-20" content="Skidded left">
    <zn-button slot="anchor">Skid Left</zn-button>
  </zn-hover-container>

  <zn-hover-container skidding="20" content="Skidded right">
    <zn-button slot="anchor">Skid Right</zn-button>
  </zn-hover-container>
</div>

Disabled State

Disable the hover container to prevent it from showing.

Disabled 
<zn-hover-container disabled content="This won't show">
  <zn-button slot="anchor" disabled>Disabled</zn-button>
</zn-hover-container>

Without Hoisting

Disable hoisting to keep the popup within the document flow.

No Hoist 
<zn-hover-container hoist="false" content="This popup stays in the document flow">
  <zn-button slot="anchor">No Hoist</zn-button>
</zn-hover-container>

Icon with Help Text

Add help information to icons.

Password Requirements
  • At least 8 characters
  • One uppercase letter
  • One number
  • One special character
 
<div style="display: flex; align-items: center; gap: 10px;">
  <span>Password Requirements</span>
  <zn-hover-container trigger="hover focus">
    <zn-icon slot="anchor" src="help" size="20" style="color: var(--zn-color-info-500); cursor: help;"></zn-icon>
    <div slot="content" style="max-width: 200px;">
      <ul style="margin: 0; padding-left: 20px;">
        <li>At least 8 characters</li>
        <li>One uppercase letter</li>
        <li>One number</li>
        <li>One special character</li>
      </ul>
    </div>
  </zn-hover-container>
</div>

Form Field Help

Provide contextual help for form fields.

Finding your API Key

Go to Settings > Developer > API Keys to generate a new key. 

<div class="form-spacing">
  <div style="display: flex; align-items: center; gap: 5px;">
    <zn-input label="API Key" placeholder="Enter your API key"></zn-input>
    <zn-hover-container trigger="click" placement="right">
      <zn-button slot="anchor" icon="info" color="transparent" size="small"></zn-button>
      <div slot="content" style="max-width: 250px; padding: 10px;">
        <h4 style="margin: 0 0 5px 0;">Finding your API Key</h4>
        <p style="margin: 0; font-size: 0.9em;">Go to Settings &gt; Developer &gt; API Keys to generate a new key.</p>
      </div>
    </zn-hover-container>
  </div>
</div>

Status Indicator

Add explanations to status indicators.

Online Degraded Offline 
<div style="display: flex; gap: 15px; align-items: center;">
  <zn-hover-container content="System operational">
    <zn-badge slot="anchor" color="success">Online</zn-badge>
  </zn-hover-container>

  <zn-hover-container content="Experiencing issues">
    <zn-badge slot="anchor" color="warning">Degraded</zn-badge>
  </zn-hover-container>

  <zn-hover-container content="Service unavailable">
    <zn-badge slot="anchor" color="error">Offline</zn-badge>
  </zn-hover-container>
</div>

Complex Content

Display detailed information with formatted content.

View Details

Product Details

SKU: ABC-12345
Price: $99.99
Stock: 42 units
Category: Electronics
 
<zn-hover-container trigger="click" placement="bottom-start">
  <zn-button slot="anchor" icon="info">View Details</zn-button>
  <div slot="content" style="padding: 15px; max-width: 300px;">
    <h3 style="margin: 0 0 10px 0;">Product Details</h3>
    <div style="display: grid; gap: 5px; font-size: 0.9em;">
      <div><strong>SKU:</strong> ABC-12345</div>
      <div><strong>Price:</strong> $99.99</div>
      <div><strong>Stock:</strong> 42 units</div>
      <div><strong>Category:</strong> Electronics</div>
    </div>
  </div>
</zn-hover-container>

Importing

If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.

To import this component from the CDN using a script tag: 

<script type="module" src="https://cdn.jsdelivr.net/npm/@kubex/zinc@1.0.86/dist/components/hover-container/hover-container.js"></script>

To import this component from the CDN using a JavaScript import: 

import 'https://cdn.jsdelivr.net/npm/@kubex/zinc@1.0.86/dist/components/hover-container/hover-container.js';

To import this component using a bundler:

import '@kubex/zinc/dist/components/hover-container/hover-container.js';

Slots

Name Description
(default) The content of the hover-container
anchor The anchor the hover-container is attached to.

Learn more about using slots.

Events

Name React Event Description Event Detail
zn-show Emitted when the hover-container is shown. -
zn-after-show Emitted after the hover-container is shown. -
zn-hide Emitted when the hover-container is hidden. -
zn-after-hide Emitted after the hover-container is hidden. -

Learn more about events.