Anchor select

Using the ReactTooltip anchor select prop.

Basic usage

The anchorSelect prop uses a CSS selector to attach the tooltip to the anchor elements. The most common use for this is selecting elements with a specific id, or with a CSS class.

Using id attribute

info

A CSS selector for a specific id begins with a #. Don't forget to put it before the id on your selector!

import { Tooltip } from 'react-tooltip';

<a id="my-anchor-element-id">◕‿‿◕</a>
<Tooltip
  // Don't forget the `#`!
  anchorSelect="#my-anchor-element-id"
  content="Hello world!"
/>

◕‿‿◕

Using class attribute

info

A CSS selector for a specific class begins with a .. Don't forget to put it before the class on your selector!

import { Tooltip } from 'react-tooltip';

<a className="my-anchor-element-class">◕‿‿◕</a>
<a className="my-anchor-element-class">◕‿‿◕</a>
<a className="my-anchor-element-class">◕‿‿◕</a>
<a className="my-anchor-element-class">◕‿‿◕</a>
<Tooltip
  // Don't forget the `.`!
  anchorSelect=".my-anchor-element-class"
  content="Hello world!"
/>

◕‿‿◕◕‿‿◕◕‿‿◕◕‿‿◕

Complex selectors

Once you've understood how it works, you can write CSS selectors as complex as you can imagine. Here are some interesting examples.

Attribute prefix

info

[attr^='prefix'] can be read as "any element that has an attribute attr in which its value starts with prefix". Remove the ^ for an exact match.

This example uses the name attribute, but it works for any HTML attribute (id, class, ...).

import { Tooltip } from 'react-tooltip';

<a name="my-anchor-element-1">◕‿‿◕</a>
<a name="my-anchor-element-2">◕‿‿◕</a>
<a name="my-anchor-element-3">◕‿‿◕</a>
<a name="my-anchor-element-4">◕‿‿◕</a>
<Tooltip
  anchorSelect="[name^='my-anchor-element-']"
  content="Hello world!"
/>

◕‿‿◕◕‿‿◕◕‿‿◕◕‿‿◕

Child selector

info

Make sure there isn't an easier alternative before diving into complex selectors like this.

Often you can just use a class selector or something else much simpler.

import { Tooltip } from 'react-tooltip';

<section id="section-anchor-select" style={{ marginTop: '100px' }}>
  <a>◕‿‿◕</a>
  <a>◕‿‿◕</a>
  <a>◕‿‿◕</a>
  <a>◕‿‿◕</a>
</section>
<Tooltip
  anchorSelect="section[id='section-anchor-select'] > a:nth-child(odd)"
  content="I am an odd child!"
/>
<Tooltip
  anchorSelect="section[id='section-anchor-select'] > a:nth-child(even)"
  content="I am an even child!"
/>

◕‿‿◕◕‿‿◕◕‿‿◕◕‿‿◕