Tooltip – Design Portal

A tooltip is a short descriptive message that appears when a user hovers or focuses on an element.

Demo

<p>This shortcode allows you to create colorful <span class="tooltip-container" x-data="{ tooltip: false }">
<span x-on:mouseover="tooltip = true; " x-on:mouseleave="tooltip = false" style="cursor: pointer;">
    <span class="tooltip-container__label" style="color: var(--black);" onmouseover="this.style.color= 'var(--primary)';" onmouseleave="this.style.color='var(--black)';">tooltips</span>
</span>
<span class="tooltip-container__tooltip" x-on:mouseover="tooltip = true; " x-on:mouseleave="tooltip = false" x-show.transition.origin.top="tooltip" style="display: none;">
    <span class="tooltip-container__title" style="font-weight: bold;">Define: Tooltip</span>
    <span class="tooltip-container__text" style="display: block;">Tooltip Content</span>
</span>
</span> on almost any element. The tooltip can be shown on mouse over or on click.</p>

/*Tooltip styles are generated inline*/

.tooltip-container__label {
  border-bottom: 0.25rem dashed var(--primary);
  font-weight: bold;
  padding: 0.25rem;
}

.tooltip-container .tooltip-container__label {
  border-bottom: 0.25rem dashed var(--accent-1);
  color: var(--accent-1);
  font-weight: normal;
}

.tooltip-container__tooltip {
  background-color: #f4f4f4;
  border: 0.063rem solid var(--primary);
  border-radius: 0.5rem;
  box-shadow: 0rem 0.125rem 0.25rem #d9d9d9;
  left: var(--gutter);
  margin-top: 2rem;
  padding: 0.625rem;
  position: absolute;
  right: var(--gutter);
  transition: 0.3s ease-in-out;
  z-index: 3;
}

@media (min-width: 992px)
  .tooltip-container__tooltip {
    left: 25%;
    margin: 2rem 1.5rem 1.5rem 1.5rem;
    max-width: 47.5rem;
    right: 30%;
    top: auto;
  }
}

The unified tooltip is built using Alpine.JS

Note

These screenshots are taken from Activebeat theme.
The unified tooltip utilizes Alpine.js for functionality, so this demo is not available.

States & Variations

Default

Hover

Usage

In a Wordpress post, you can add a tooltip by wrapping text with: [unified_tooltip title="Define: Tooltip" tip="Tooltip Content"]tooltips[/unified_tooltip]. The title of the tooltip can be changed within the title attribute, and content with the tip attribute.

<p>This shortcode allows you to create colorful [unified_tooltip title="Define: Tooltip" tip="Tooltip Content"]tooltips[/unified_tooltip] on almost any element. The tooltip can be shown on mouse over or on click.</p>

Anatomy

Tooltip
Tooltip Label
Tooltip Title
Tooltip Content