Research
Security News
Malicious npm Package Targets Solana Developers and Hijacks Funds
A malicious npm package targets Solana developers, rerouting funds in 2% of transactions to a hardcoded address.
@tippyjs/react
Advanced tools
@tippyjs/react is a React wrapper for Tippy.js, a highly customizable tooltip and popover library. It allows you to create tooltips, popovers, dropdowns, and more with ease, providing a wide range of customization options and animations.
Basic Tooltip
This feature allows you to create a basic tooltip that appears when you hover over an element. The tooltip content is customizable.
import Tippy from '@tippyjs/react';
import 'tippy.js/dist/tippy.css';
function App() {
return (
<Tippy content="Hello, World!">
<button>Hover me</button>
</Tippy>
);
}
Interactive Tooltip
This feature allows you to create an interactive tooltip that can contain HTML content and can be interacted with.
import Tippy from '@tippyjs/react';
import 'tippy.js/dist/tippy.css';
function App() {
return (
<Tippy content={<span>Interactive Content</span>} interactive={true}>
<button>Hover me</button>
</Tippy>
);
}
Custom Animation
This feature allows you to add custom animations to your tooltips. Tippy.js provides several built-in animations that you can use.
import Tippy from '@tippyjs/react';
import 'tippy.js/animations/scale.css';
function App() {
return (
<Tippy content="Animated Tooltip" animation="scale">
<button>Hover me</button>
</Tippy>
);
}
Controlled Tooltip
This feature allows you to control the visibility of the tooltip programmatically, giving you more control over when the tooltip appears and disappears.
import Tippy from '@tippyjs/react';
import 'tippy.js/dist/tippy.css';
import { useState } from 'react';
function App() {
const [visible, setVisible] = useState(false);
return (
<>
<button onClick={() => setVisible(!visible)}>Toggle Tooltip</button>
<Tippy content="Controlled Tooltip" visible={visible}>
<button>Hover me</button>
</Tippy>
</>
);
}
react-tooltip is another popular tooltip library for React. It provides a simple API for creating tooltips with various customization options. Compared to @tippyjs/react, it is less feature-rich but easier to set up for basic use cases.
react-popper is a React wrapper for Popper.js, a library used to position tooltips and popovers. It provides more control over positioning and is highly customizable, but it requires more setup compared to @tippyjs/react.
react-bootstrap is a popular UI library for React that includes a Tooltip component. It is a good choice if you are already using Bootstrap in your project, but it is less customizable compared to @tippyjs/react.
Tippy.js is the complete tooltip, popover, dropdown, and menu solution for the web, powered by Popper.
Tippy is an abstraction over Popper that provides common logic involved in all types of elements that pop out on top of the UI, positioned next to a target or reference element. This is a React wrapper for the core library, providing full integration including headless rendering abilities.
# npm
npm i @tippyjs/react
# Yarn
yarn add @tippyjs/react
CDN: https://unpkg.com/@tippyjs/react
There are two ways to use this component:
Both may be used in conjunction.
Import the Tippy
component and (optionally) the core CSS. Wrap the <Tippy />
component around the element, supplying the tooltip's content as the content
prop. It can take a string or a tree of React elements.
import React from 'react';
import Tippy from '@tippyjs/react';
import 'tippy.js/dist/tippy.css'; // optional
const StringContent = () => (
<Tippy content="Hello">
<button>My button</button>
</Tippy>
);
const JSXContent = () => (
<Tippy content={<span>Tooltip</span>}>
<button>My button</button>
</Tippy>
);
Default Tippy "just works" out of the box.
Render your own tippy element from scratch:
import React from 'react';
import Tippy from '@tippyjs/react/headless'; // different import path!
const HeadlessTippy = () => (
<Tippy
render={attrs => (
<div className="box" tabIndex="-1" {...attrs}>
My tippy box
</div>
)}
>
<button>My button</button>
</Tippy>
);
attrs
is an object containing data-placement
, data-reference-hidden
, and
data-escaped
attributes. This allows you to conditionally style your tippy.
To make Popper position your custom arrow, set a data-popper-arrow
attribute
on it:
<Tippy
render={attrs => (
<Box {...attrs}>
Hello
<Arrow data-popper-arrow="" />
</Box>
)}
>
<button>Reference</button>
</Tippy>
For details on styling the arrow from scratch, take a look at the Popper tutorial.
Note: your arrow must be an HTMLElement
(not an SVGElement
). To use an SVG
arrow, wrap it in a <div>
tag with the data-popper-arrow
attribute.
You may also pass a ref to the element directly without the attribute using a callback ref:
function App() {
const [arrow, setArrow] = useState(null);
return (
<Tippy
render={attrs => (
<Box {...attrs}>
Content
<Arrow ref={setArrow} />
</Box>
)}
popperOptions={{
modifiers: [
{
name: 'arrow',
options: {
element: arrow, // can be a CSS selector too
},
},
],
}}
>
<button>Reference</button>
</Tippy>
);
}
When rendering an element with the render
prop, you're rendering the inner
element that the root popper (positioned) node wraps.
For advanced cases you can access the root element via instance.popper
.
Here's moveTransition
with Framer Motion.
If you want to use a component element as a child of the component, ensure you forward the ref to the DOM node:
import React, {forwardRef} from 'react';
function ThisWontWork() {
return <button>Reference</button>;
}
const ThisWillWork = forwardRef((props, ref) => {
return <button ref={ref}>Reference</button>;
});
function App() {
return (
<Tippy content="Tooltip">
<ThisWillWork />
</Tippy>
);
}
styled-components
v4+ does this for you automatically, so it should be
seamless when using the styled
constructor.
Workaround for old libraries that don't forward the ref is to use a <span>
wrapper tag:
<Tippy content="Tooltip">
<span tabIndex="0">
<LegacyComponent>Reference</LegacyComponent>
</span>
</Tippy>
All of the native Tippy.js props can be passed to the component.
Visit All Props to view the complete list.
<Tippy content="Tooltip" interactive={true} interactiveBorder={20} delay={100}>
<button>Reference</button>
</Tippy>
In addition, there are 3 more props added specifically for the React component.
className?: string
<Tippy content="Tooltip" className="hello world">
<button>Reference</button>
</Tippy>
This allows you to use styled(Tippy)
or the css
prop in styled-components
or emotion
.
Note: Does not apply if using Headless Tippy.
disabled?: boolean
function App() {
const [disabled, setDisabled] = useState(false);
return (
<Tippy content="Tooltip" disabled={disabled}>
<button>Reference</button>
</Tippy>
);
}
visible?: boolean
(controlled mode)Use React's state to fully control the tippy instead of relying on the native
trigger
and hideOnClick
props:
function App() {
const [visible, setVisible] = useState(true);
const show = () => setVisible(true);
const hide = () => setVisible(false);
return (
<Tippy content="Tooltip" visible={visible} onClickOutside={hide}>
<button onClick={visible ? hide : show}>Reference</button>
</Tippy>
);
}
reference?: React.RefObject | Element
Available from
v4.1.0
If you can't place your reference element as a child inside <Tippy />
, you can
use this prop instead. It accepts a React RefObject
(.current
property) or a
plain Element
.
function App() {
const ref = useRef();
return (
<>
<button ref={ref} />
<Tippy content="Tooltip" reference={ref} />
</>
);
}
Tippy.js splits certain props into separate pieces of code called plugins to enable tree-shaking, so that components or routes that don't need the prop's functionality are not burdened with the bundle size cost of it. In addition, they enable a neat way to extend the functionality of tippy instances.
import Tippy from '@tippyjs/react';
// ⚠️ import from 'tippy.js/headless' if using Headless Tippy
import {followCursor} from 'tippy.js';
function App() {
return (
<Tippy content="Tooltip" followCursor={true} plugins={[followCursor]}>
<button>Reference</button>
</Tippy>
);
}
You can nest the components like so:
<Tippy content="Tooltip" placement="bottom">
<Tippy content="Tooltip" placement="left">
<Tippy content="Tooltip" placement="right">
<Tippy content="Tooltip">
<button>Reference</button>
</Tippy>
</Tippy>
</Tippy>
</Tippy>
By default, Tippy mounts your content
or render
elements into a container
element once created, even if the tippy isn't mounted on the DOM. In most cases,
this is fine, but in performance-sensitive scenarios or cases where mounting the
component should fire effects only when the tippy mounted, you can lazify the
component.
View the following gists to optimize your <Tippy />
if needed.
A Hook for the
createSingleton()
addon to re-use a single tippy element for many different reference element
targets.
import Tippy, {useSingleton} from '@tippyjs/react';
function App() {
const [source, target] = useSingleton();
return (
<>
{/* This is the tippy that gets used as the singleton */}
<Tippy singleton={source} delay={500} />
{/* These become "virtual" */}
<Tippy content="Hello" singleton={target}>
<button>Reference</button>
</Tippy>
<Tippy content="Bye" singleton={target}>
<button>Reference</button>
</Tippy>
</>
);
}
useSingleton()
takes an optional props argument:
const [source, target] = useSingleton({
disabled: true,
overrides: ['placement'],
});
The render
prop takes the singleton content as a second parameter:
import Tippy, {useSingleton} from '@tippyjs/react/headless';
function App() {
const [source, target] = useSingleton();
return (
<>
<Tippy
singleton={source}
render={(attrs, content) => (
<div className="box" tabIndex="-1" {...attrs}>
{content}
</div>
)}
delay={500}
/>
<Tippy content="Hello" singleton={target}>
<button>Reference</button>
</Tippy>
<Tippy content="Bye" singleton={target}>
<button>Reference</button>
</Tippy>
</>
);
}
MIT
FAQs
React component for Tippy.js
The npm package @tippyjs/react receives a total of 411,675 weekly downloads. As such, @tippyjs/react popularity was classified as popular.
We found that @tippyjs/react demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
A malicious npm package targets Solana developers, rerouting funds in 2% of transactions to a hardcoded address.
Security News
Research
Socket researchers have discovered malicious npm packages targeting crypto developers, stealing credentials and wallet data using spyware delivered through typosquats of popular cryptographic libraries.
Security News
Socket's package search now displays weekly downloads for npm packages, helping developers quickly assess popularity and make more informed decisions.