![Deno 2.2 Improves Dependency Management and Expands Node.js Compatibility](https://cdn.sanity.io/images/cgdhsj6q/production/97774ea8c88cc8f4bed2766c31994ebc38116948-1664x1366.png?w=400&fit=max&auto=format)
Security News
Deno 2.2 Improves Dependency Management and Expands Node.js Compatibility
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
react-accessible-tooltip
Advanced tools
React utility component for building accessible tooltips.
Try out the interactive demo here.
React Accessible Tooltip is a component which lets you build accessible tooltips. It handles all the interactivity and accessibility stuff, but keeps out of the way so you can use whatever markup and styling you want.
Basic usage requires you to pass 'label' and 'overlay' render functions. React
Accessible Tooltip passes you both the state of the tooltip (isHidden
) and an
object full of properties you should spread across your components
(labelAttributes
, overlayAttributes
).
Install this package and it's co-dependencies:
npm install react-accessible-tooltip react react-dom
import { Tooltip } from "react-accessible-tooltip";
<Tooltip
label={(props) => (
<span {...props.labelAttributes} className="tooltip-label">
{`hover me for info`}
</span>
)}
overlay={(props) => (
<span
{...props.overlayAttributes}
className={
props.isHidden
? "tooltip-overlay tooltip-overlay--hidden"
: "tooltip-overlay"
}
>
{`this is more info`}
</span>
)}
/>
function({ isHidden, labelAttributes, requestHide, requestShow, requestToggle }) => React.Node
The label
prop should be passed a render function. The function will be called
with these arguments:
Property | Type | Description |
---|---|---|
isHidden | boolean | The current state of the tooltip. |
labelAttributes | object | The various attributes which ought to be assigned to the outer-most element in your render function (eg. <span {...labelAttributes} /> ). |
requestHide | function | Callable which manually sets the state of the tooltip to 'hidden'. |
requestShow | function | Callable which manually sets the state of the tooltip to 'shown'. |
requestToggle | function | Callable which manually toggles the state of the tooltip between 'shown' or 'hidden'. |
function({ isHidden, overlayAttributes, requestHide, requestShow, requestToggle }) => React.Node
The overlay
prop should be passed a render function. The function will be
called with these arguments:
Property | Type | Description |
---|---|---|
isHidden | boolean | The current state of the tooltip. |
overlayAttributes | object | The various attributes which ought to be assigned to the outer-most element in your render function (eg. <span {...overlayAttributes} /> ). |
requestHide | function | Callable which manually sets the state of the tooltip to 'hidden'. |
requestShow | function | Callable which manually sets the state of the tooltip to 'shown'. |
requestToggle | function | Callable which manually toggles the state of the tooltip between 'shown' or 'hidden'. |
MIT.
FAQs
React utility component for building accessible tooltips.
The npm package react-accessible-tooltip receives a total of 343 weekly downloads. As such, react-accessible-tooltip popularity was classified as not popular.
We found that react-accessible-tooltip demonstrated a healthy version release cadence and project activity because the last version was released less than 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.
Security News
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
Security News
React's CRA deprecation announcement sparked community criticism over framework recommendations, leading to quick updates acknowledging build tools like Vite as valid alternatives.
Security News
Ransomware payment rates hit an all-time low in 2024 as law enforcement crackdowns, stronger defenses, and shifting policies make attacks riskier and less profitable.