How to add open attribute to anchor element

[edify-jashmore]

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>

[gabrieljablonski]

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.