Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings
Discussion options

How would I get the open state of the tooltip to be reflected on the anchor element

For example with this example https://react-tooltip.com/docs/examples/basic-examples#data-attributes

import { Tooltip } from 'react-tooltip';

<a data-tooltip-id="my-tooltip" data-tooltip-content="Hello world!">
  ◕‿‿◕
</a>
<a data-tooltip-id="my-tooltip" data-tooltip-content="Hello to you too!">
  ◕‿‿◕
</a>
<Tooltip id="my-tooltip" />

After the element is rendered, it gets an open attribute

<a data-tooltip-id="my-tooltip" data-tooltip-content="Hello world!" data-open="false">
  ◕‿‿◕
</a>

You hover or whatever and it get open true

<a data-tooltip-id="my-tooltip" data-tooltip-content="Hello world!" data-open="true">
  ◕‿‿◕
</a>
You must be logged in to vote

Replies: 1 comment

Comment options

That's an interesting idea! You're welcome to open a feature request about this.

Until (and if) this gets implemented, you could maybe accomplish what you're trying by using a tooltip ref. See the Imperative Mode example page.

// `TooltipRefProps` is useful if you're using TypeScript
import { Tooltip, TooltipRefProps } from 'react-tooltip';

const tooltipRef = useRef<TooltipRefProps>(null)

console.log(tooltipRef.activeAnchor)

<Tooltip ref={tooltipRef} />

Depending on the structure of your components (and what you're trying to accomplish exactly), it might be hard to do this with a single "global" tooltip. Feel free to post more details about your use case and we might be able to give some more insight.

You must be logged in to vote
0 replies
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Category
🙏
Q&A
Labels
None yet
2 participants
Morty Proxy This is a proxified and sanitized view of the page, visit original site.