TooltipFx

Experimental Alpha

This library is a work-in-progress. We are releasing it early to gather feedback, but it is not ready for production.

TooltipFx extends the core Tooltip component with a handful of CSS-only micro-interaction effects applied to the tooltip popup.

Opt-in Component

TooltipFx adds a few hundred lines of CSS for animation effects. It's ideal for marketing sites, landing pages, or when visual polish is a priority.

Examples

Vue

Lit

React

Live Preview

Bounce

Pulse

Jelly

Shimmer

Glow

Flip

Ripple

Sweep

View Vue Code

<template>
  <div class="stacked-mobile mbe4">
    <VueTooltipFx fx="bounce" content="Bounce effect">
      <VueButton>Bounce</VueButton>
    </VueTooltipFx>
    <VueTooltipFx fx="pulse" content="Pulse effect">
      <VueButton variant="primary">Pulse</VueButton>
    </VueTooltipFx>
    <VueTooltipFx fx="jelly" fx-speed="lg" fx-ease="spring-sm" content="Jelly effect">
      <VueButton variant="success">Jelly</VueButton>
    </VueTooltipFx>
    <VueTooltipFx fx="shimmer" fx-speed="xl" content="Shimmer effect">
      <VueButton variant="warning">Shimmer</VueButton>
    </VueTooltipFx>
    <VueTooltipFx fx="glow" content="Glow effect">
      <VueButton variant="danger">Glow</VueButton>
    </VueTooltipFx>
    <VueTooltipFx fx="flip" fx-speed="lg" fx-ease="ease-in" content="Flip effect">
      <VueButton>Flip</VueButton>
    </VueTooltipFx>
    <VueTooltipFx fx="ripple" content="Ripple effect">
      <VueButton variant="primary">Ripple</VueButton>
    </VueTooltipFx>
    <VueTooltipFx fx="highlight-sweep" fx-speed="lg" content="Sweep effect">
      <VueButton variant="success">Sweep</VueButton>
    </VueTooltipFx>
  </div>
</template>

<script setup>
import { VueTooltipFx } from "agnosticui-core/tooltip-fx/vue";
import { VueButton } from "agnosticui-core/button/vue";
</script>

Live Preview

View Lit / Web Component Code

import { LitElement, html } from 'lit';
import 'agnosticui-core/tooltip-fx';
import 'agnosticui-core/button';

export class TooltipFxLitExamples extends LitElement {
  // Render in light DOM to access global utility classes
  createRenderRoot() {
    return this;
  }

  render() {
    return html`
      <div class="stacked-mobile mbe4">
        <ag-tooltip-fx fx="bounce" content="Bounce effect">
          <ag-button>Bounce</ag-button>
        </ag-tooltip-fx>
        <ag-tooltip-fx fx="pulse" content="Pulse effect">
          <ag-button variant="primary">Pulse</ag-button>
        </ag-tooltip-fx>
        <ag-tooltip-fx fx="jelly" fx-speed="lg" fx-ease="spring-sm" content="Jelly effect">
          <ag-button variant="success">Jelly</ag-button>
        </ag-tooltip-fx>
        <ag-tooltip-fx fx="shimmer" fx-speed="xl" content="Shimmer effect">
          <ag-button variant="warning">Shimmer</ag-button>
        </ag-tooltip-fx>
        <ag-tooltip-fx fx="glow" content="Glow effect">
          <ag-button variant="danger">Glow</ag-button>
        </ag-tooltip-fx>
        <ag-tooltip-fx fx="flip" fx-speed="lg" fx-ease="ease-in" content="Flip effect">
          <ag-button>Flip</ag-button>
        </ag-tooltip-fx>
        <ag-tooltip-fx fx="ripple" content="Ripple effect">
          <ag-button variant="primary">Ripple</ag-button>
        </ag-tooltip-fx>
        <ag-tooltip-fx fx="highlight-sweep" fx-speed="lg" content="Sweep effect">
          <ag-button variant="success">Sweep</ag-button>
        </ag-tooltip-fx>
      </div>
    `;
  }
}

customElements.define('tooltipfx-lit-examples', TooltipFxLitExamples);

Interactive Preview: To see this example in action, select Open in CodePen (NPM package approach) or Open in StackBlitz (CLI local components) to launch an interactive playground.

View React Code

import { ReactTooltipFx } from "agnosticui-core/tooltip-fx/react";
import { ReactButton } from "agnosticui-core/button/react";

export default function TooltipFxReactExamples() {
  return (
    <div className="stacked-mobile mbe4">
      <ReactTooltipFx fx="bounce" content="Bounce effect">
        <ReactButton>Bounce</ReactButton>
      </ReactTooltipFx>
      <ReactTooltipFx fx="pulse" content="Pulse effect">
        <ReactButton variant="primary">Pulse</ReactButton>
      </ReactTooltipFx>
      <ReactTooltipFx fx="jelly" fxSpeed="lg" fxEase="spring-sm" content="Jelly effect">
        <ReactButton variant="success">Jelly</ReactButton>
      </ReactTooltipFx>
      <ReactTooltipFx fx="shimmer" fxSpeed="xl" content="Shimmer effect">
        <ReactButton variant="warning">Shimmer</ReactButton>
      </ReactTooltipFx>
      <ReactTooltipFx fx="glow" content="Glow effect">
        <ReactButton variant="danger">Glow</ReactButton>
      </ReactTooltipFx>
      <ReactTooltipFx fx="flip" fxSpeed="lg" fxEase="ease-in" content="Flip effect">
        <ReactButton>Flip</ReactButton>
      </ReactTooltipFx>
      <ReactTooltipFx fx="ripple" content="Ripple effect">
        <ReactButton variant="primary">Ripple</ReactButton>
      </ReactTooltipFx>
      <ReactTooltipFx fx="highlight-sweep" fxSpeed="lg" content="Sweep effect">
        <ReactButton variant="success">Sweep</ReactButton>
      </ReactTooltipFx>
    </div>
  );
}

Open in CodePen

Open in StackBlitz

Usage

TIP

The framework examples below import AgnosticUI as an npm package. Alternatively, you can use the CLI for complete control, AI/LLM visibility, and full code ownership:

bash

npx ag init --framework FRAMEWORK # react, vue, lit, svelte, etc.
npx ag add TooltipFx

The CLI copies source code directly into your project, giving you full visibility and control. After running npx ag add, you'll receive exact import instructions.

Vue

vue

<template>
  <VueTooltipFx fx="bounce" content="Helpful context">
    <button>Hover me</button>
  </VueTooltipFx>
</template>

<script setup>
import { VueTooltipFx } from "agnosticui-core/tooltip-fx/vue";
</script>

React

tsx

import { ReactTooltipFx } from "agnosticui-core/tooltip-fx/react";

function App() {
  return (
    <ReactTooltipFx fx="bounce" content="Helpful context">
      <button>Hover me</button>
    </ReactTooltipFx>
  );
}

Lit

html

<script type="module">
  import "agnosticui-core/tooltip-fx";
</script>

<ag-tooltip-fx fx="bounce" content="Helpful context">
  <button>Hover me</button>
</ag-tooltip-fx>

Props

Inherits all Tooltip Props plus:

Prop	Type	Default	Description
`fx`	`string`	`undefined`	Effect name: `bounce`, `pulse`, `jelly`, `shimmer`, `glow`, `flip`, `ripple`, `highlight-sweep`, `press-pop`, `slide-in`
`fxSpeed`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`	Animation duration preset
`fxEase`	`'ease' \| 'bounce' \| 'spring-sm' \| ...`	`'ease'`	Easing function preset
`fxDisabled`	`boolean`	`false`	Disable effects programmatically

Effects Library

FX Name	Trigger	Description
`bounce`	hover	Vertical pop, light spring
`pulse`	hover	Scale grow/shrink animation
`jelly`	hover	Squash/stretch elastic wobble
`shimmer`	hover	Light sweep across surface
`glow`	hover	Box-shadow pulse effect
`flip`	hover	Y-axis rotation (3D flip)
`ripple`	hover	Center-origin radial expansion
`highlight-sweep`	hover	Horizontal highlight sweep
`press-pop`	active	Quick press down/up
`slide-in`	mount	Entrance animation from below

TooltipFx ​

Examples ​

Usage ​

Props ​

Effects Library ​

TooltipFx

Examples

Usage

Props

Effects Library