Agnostic

Tooltip

The Tooltip component is often used as a supplemental button to close things.

Examples

Tooltips
Tooltip top-start
Tooltip top
Tooltip top-end
Tooltip left-start
Tooltip left
Tooltip left-end
Tooltip right-start
Tooltip right
Tooltip right-end
Tooltip bottom-start
Tooltip bottom
Tooltip bottom-end

Usage

astro logo

React, Vue, and Svelte examples on a single playground page 🚀 💥

codesandbox logo View in CodeSandbox Stackblitz logo View in Stackblitz

react logoReact

View source
import "agnostic-react/dist/common.min.css";
import "agnostic-react/dist/esm/index.css";
import { Tooltip } from "agnostic-react";
export const YourComponent = () => (
  <div class="text-center tooltips-container">
    <section class="mbs56 mbe40 flex-inline justify-between w-100">
      <Tooltip placement="top-start" label="Tooltip hover text…">
        <span className='demo-tooltip'>Tooltip (top-start). Hover me!</span>
      </Tooltip>
      <Tooltip placement="top" label="Tooltip hover text…">
        <span className='demo-tooltip'>Tooltip (top). Hover me!</span>
      </Tooltip>
      <Tooltip placement="top-right" label="Tooltip hover text…">
        <span className='demo-tooltip'>Tooltip (top-right). Hover me!</span>
      </Tooltip>
    </section>
    <section
      class="flex flex-column items-center"
      style={{gap: 'var(--fluid-18)'}}
    >
      <Tooltip placement="left-start" label="Tooltip hover text…">
        <span className='demo-tooltip'>Tooltip (left-start). Hover me!</span>
      </Tooltip>
      <Tooltip placement="left" label="Tooltip hover text…">
        <span className='demo-tooltip'>Tooltip (left). Hover me!</span>
      </Tooltip>
      <Tooltip placement="left-end" label="Tooltip hover text…">
        <span className='demo-tooltip'>Tooltip (left-end). Hover me!</span>
      </Tooltip>
      <Tooltip placement="right-start" label="Tooltip hover text…">
        <span className='demo-tooltip'>Tooltip (right-start). Hover me!</span>
      </Tooltip>
      <Tooltip placement="right" label="Tooltip hover text…">
        <span className='demo-tooltip'>Tooltip (right). Hover me!</span>
      </Tooltip>
      <Tooltip placement="right-end" label="Tooltip hover text…">
        <span className='demo-tooltip'>Tooltip (right-end). Hover me!</span>
      </Tooltip>
    </section>
    <section class="mbs56 mbe40 flex-inline justify-between w-100">
      <Tooltip placement="bottom-start" label="Tooltip hover text…">
        <span className='demo-tooltip'>Tooltip (bottom-start). Hover me!</span>
      </Tooltip>
      <Tooltip placement="bottom" label="Tooltip hover text…">
        <span className='demo-tooltip'>Tooltip (bottom). Hover me!</span>
      </Tooltip>
      <Tooltip placement="bottom-end" label="Tooltip hover text…">
        <span className='demo-tooltip'>Tooltip (bottom-end). Hover me!</span>
      </Tooltip>
    </section>
  </div>
)

React: component source

Vue 3 logoVue 3

View source
<script>
import "agnostic-vue/dist/common.min.css";
import "agnostic-vue/dist/index.css";
import { Tooltip } from "agnostic-vue";
</script>
<template>
  <div class="tooltips-container">
    <section class="mbs56 mbe40 flex-inline justify-between w-100">
      <Tooltip placement="top-start">
        Tooltip top-start
        <template #content>This is the tooltip content from named slot.</template>
      </Tooltip>
      <Tooltip placement="top">
        Tooltip top
        <template #content>This is the tooltip content from named slot.</template>
      </Tooltip>
      <Tooltip placement="top-end">
        Tooltip top-end
        <template #content>This is the tooltip content from named slot.</template>
      </Tooltip>
    </section>
    <section
      class="flex flex-column items-center"
      style="gap: var(--fluid-18);"
    >
      <Tooltip placement="left-start">
        Tooltip left-start
        <template #content>This is the tooltip content from named slot.</template>
      </Tooltip>
      <Tooltip placement="left">
        Tooltip left
        <template #content>This is the tooltip content from named slot.</template>
      </Tooltip>
      <Tooltip placement="left-end">
        Tooltip left-end
        <template #content>This is the tooltip content from named slot.</template>
      </Tooltip>
      <Tooltip placement="right-start">
        Tooltip right-start
        <template #content>This is the tooltip content from named slot.</template>
      </Tooltip>
      <Tooltip placement="right">
        Tooltip right
        <template #content>This is the tooltip content from named slot.</template>
      </Tooltip>
      <Tooltip placement="right-end">
        Tooltip right-end
        <template #content>This is the tooltip content from named slot.</template>
      </Tooltip>
    </section>
    <section class="mbs56 mbe40 flex-inline justify-between w-100">
      <Tooltip placement="bottom-start">
        Tooltip bottom-start
        <template #content>This is the tooltip content from named slot.</template>
      </Tooltip>
      <Tooltip placement="bottom">
        Tooltip bottom
        <template #content>This is the tooltip content from named slot.</template>
      </Tooltip>
      <Tooltip placement="bottom-end">
        Tooltip bottom-end
        <template #content>This is the tooltip content from named slot.</template>
      </Tooltip>
    </section>
  </div>
</template>

Vue 3: component source, storybook tests

Svelte logoSvelte

Note that Tooltips is only implemneted in the `agnostic-svelte-ts` package (intended to replace agnostic-svelte at some point).

View source
<script>
  // agnostic-svelte-ts, at some point, will become agnostic-svelte
  import 'agnostic-svelte-ts/css/common.min.css';
  import { Tooltip } from "agnostic-svelte-ts";
</script>
<div class="text-center tooltips-container">
  <section class="mbs56 mbe40 flex-inline justify-between w-100">
    <Tooltip placement="top-start">
      Tooltip top-start
      <div slot="content">This is the tooltip content from named slot.</div>
    </Tooltip>
    <Tooltip placement="top">
      Tooltip top
      <div slot="content">This is the tooltip content from named slot.</div>
    </Tooltip>
    <Tooltip placement="top-end">
      Tooltip top-end
      <div slot="content">This is the tooltip content from named slot.</div>
    </Tooltip>
  </section>
  <section
    class="flex flex-column items-center"
    style="gap: var(--fluid-18);"
  >
    <Tooltip placement="left-start">
      Tooltip left-start
      <div slot="content">This is the tooltip content from named slot.</div>
    </Tooltip>
    <Tooltip placement="left">
      Tooltip left
      <div slot="content">This is the tooltip content from named slot.</div>
    </Tooltip>
    <Tooltip placement="left-end">
      Tooltip left-end
      <div slot="content">This is the tooltip content from named slot.</div>
    </Tooltip>
    <Tooltip placement="right-start">
      Tooltip right-start
      <div slot="content">This is the tooltip content from named slot.</div>
    </Tooltip>
    <Tooltip placement="right">
      Tooltip right
      <div slot="content">This is the tooltip content from named slot.</div>
    </Tooltip>
    <Tooltip placement="right-end">
      Tooltip right-end
      <div slot="content">This is the tooltip content from named slot.</div>
    </Tooltip>
  </section>
  <section class="mbs56 mbe40 flex-inline justify-between w-100">
    <Tooltip placement="bottom-start">
      Tooltip bottom-start
      <div slot="content">This is the tooltip content from named slot.</div>
    </Tooltip>
    <Tooltip placement="bottom">
      Tooltip bottom
      <div slot="content">This is the tooltip content from named slot.</div>
    </Tooltip>
    <Tooltip placement="bottom-end">
      Tooltip bottom-end
      <div slot="content">This is the tooltip content from named slot.</div>
    </Tooltip>
  </section>
</div>

Svelte (Typescript): component source

Storybook

You can run the framework Storybooks and see live examples for React, Vue 3, Svelte, Astro, and Angular (experimental). The following will set up Storybook and run locally:

How to run Storybook
git clone git@github.com:AgnosticUI/agnosticui.git
cd agnosticui/<PACKAGE_NAME> && npm i # e.g. cd agnosticui/agnostic-react && npm i
npm run storybook

See Running Storybook.