Writing contentComponents

Tooltips

The Tooltips component provides a way to display additional information when users hover over an element. This is particularly useful for providing context or explanations without cluttering the interface.

Tooltips in code

The code tooltip component allows you to provide contextual information for variables and values within your code examples. When users hover over highlighted code, they can see explanations, documentation links, or additional context without leaving the code example.

1const apiKey = "{{API_KEY}}";
1// Import required libraries
2import axios from "axios";
3
4// Configure API client with authentication
5const api = axios.create({
6	baseURL: "{{BASE_URL}}",
7	headers: {
8	Authorization: `Bearer {{API_KEY}}`,
9	"Content-Type": "application/json",
10	},
11});

Properties

data
objectRequired

Key-value pairs where the values are displayed in your code blocks.

tooltips
object

Key-value pairs where the values are displayed in the tooltips. The Key for tooltips must match the Key for data.

Style a code tooltip

To customize code tooltips, target the .fern-mdx-tooltip-content selector. You can override CSS variables or add any custom styles:

1.fern-mdx-tooltip-content {
2  --tooltip-padding-x: 1.5rem; /* Horizontal padding inside tooltip */
3  /* Add custom styles here */
4}

Tooltips for text

The text tooltip component allows you to provide contextual information for any text element in your documentation. When users hover over them, they can see definitions or additional context without leaving the current page.

Documentation becomes more interactive when you add tooltips to key terms. You can include rich content with custom positioning for more detailed explanations.

Properties

tip
string | ReactNodeRequired

The content to display in the tooltip. Can be a simple string or React component for more complex content.

side
'top' | 'right' | 'bottom' | 'left'Defaults to top

Controls which side of the element the tooltip appears on.

sideOffset
numberDefaults to 4

The distance in pixels between the tooltip and the trigger element.

Style a text tooltip

To customize text tooltips, target the .fern-mdx-tooltip-trigger selector. You can override CSS variables for common customizations or add any custom styles:

1.fern-mdx-tooltip-trigger {
2  --tooltip-underline-color: blue; /* Color of the underline in default state */
3  --tooltip-underline-hover-color: green; /* Color of the underline on hover */
4  --tooltip-underline-thickness: 2px; /* Thickness of the underline */
5  --tooltip-underline-offset: 2px; /* Distance between text and underline */
6  --tooltip-transition-duration: 0.10s; /* Hover transition speed */
7  /* Add custom styles here */
8}