Skip to content

Latest commit

 

History

History
202 lines (164 loc) · 5.1 KB

anchor-select.mdx

File metadata and controls

202 lines (164 loc) · 5.1 KB
sidebar_position
1

Anchor select

Using the ReactTooltip anchor select prop.

import { Tooltip } from 'react-tooltip' import 'react-tooltip/dist/react-tooltip.css'

export const TooltipAnchor = ({ children, id, ...rest }) => { return ( <span id={id} style={{ display: 'flex', justifyContent: 'center', margin: 'auto', alignItems: 'center', width: '60px', height: '60px', borderRadius: '60px', color: '#222', background: 'rgba(255, 255, 255, 1)', cursor: 'pointer', boxShadow: '3px 4px 3px rgba(0, 0, 0, 0.5)', border: '1px solid #333', }} {...rest} > {children} ) }

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';
import 'react-tooltip/dist/react-tooltip.css';

<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 id begins with a .. Don't forget to put it before the class on your selector!

:::

import { Tooltip } from 'react-tooltip';
import 'react-tooltip/dist/react-tooltip.css';

<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';
import 'react-tooltip/dist/react-tooltip.css';

<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';
import 'react-tooltip/dist/react-tooltip.css';

<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!"
/>
◕‿‿◕ ◕‿‿◕ ◕‿‿◕ ◕‿‿◕