Tooltip

1
Documentation becomes more interactive when you add <Tooltip tip="A simple tooltip for basic explanations">tooltips</Tooltip> to key terms. 

1
You can include <Tooltip 
2
  tip={
3
    <div>
4
      <strong>Rich Content</strong>
5
      <br /><br />
6
      Supports HTML formatting, <a href="https://buildwithfern.com/" target="_blank">external links</a>, and <code>inline code</code>
7
    </div>
8
  } 
9
  side="right"
10
>rich content</Tooltip> with custom positioning for more detailed explanations.

1
<Template
2
	data={{ API_KEY: "123456" }}
3
	tooltips={{
4
		API_KEY: (
5
			<p>
6
				Your API key is used to authenticate requests to our API. Keep this secure and never expose it in client-side code. 
7
			</p>
8
		)
9
	}}
10
>
11
12
```ts
13
const apiKey = "{{API_KEY}}";
14
```
15
16
</Template>

1
<Template
2
	data={{ API_KEY: "example-key-test-123456789",
3
			BASE_URL: "https://api.example.com/v1",
4
	}}
5
	tooltips={{
6
		API_KEY: (<p>
7
		Your API key is used to authenticate requests to our API. Keep this secure and never expose it in client-side code.
8
		<br /><br />
9
		You can find your API keys in the <a href="https://dashboard.example.com/settings/api-keys">Dashboard</a>
10
		<br /><br />
11
		<strong>Note:</strong> Keys prefixed with <code>example-key-test-</code> are for testing, while keys with <code>example-key-live-</code> are for production.
12
		</p>),
13
		BASE_URL: (<p>
14
		The base URL for all API requests. Different environments (test/production) use different base URLs.
15
		<br /><br />
16
		See our <a href="https://docs.example.com/environments">Environments documentation</a> for more details.
17
		</p>),
18
	}}
19
>
20
21
```ts
22
// Import required libraries
23
import axios from "axios";
24
25
// Configure API client with authentication
26
const api = axios.create({
27
	baseURL: "{{BASE_URL}}",
28
	headers: {
29
	Authorization: `Bearer {{API_KEY}}`,
30
	"Content-Type": "application/json",
31
},
32
});
33
```
34
35
</Template>