diff --git a/fern/docs.yml b/fern/docs.yml index 1643778..b0dfc67 100644 --- a/fern/docs.yml +++ b/fern/docs.yml @@ -43,6 +43,9 @@ navigation: - page: Customize your docs path: docs/pages/customization.mdx icon: fa-duotone fa-palette + - page: Tooltips with reusable snippets + path: docs/pages/tooltip-snippets.mdx + icon: fa-duotone fa-message - page: Support path: docs/pages/support.mdx icon: fa-duotone fa-headset diff --git a/fern/docs/pages/tooltip-snippets.mdx b/fern/docs/pages/tooltip-snippets.mdx new file mode 100644 index 0000000..6225769 --- /dev/null +++ b/fern/docs/pages/tooltip-snippets.mdx @@ -0,0 +1,50 @@ +--- +title: Tooltips with reusable snippets +subtitle: Share glossary definitions across your docs using tooltips and reusable snippets +slug: tooltip-snippets +--- + +You can combine [tooltips](https://buildwithfern.com/learn/docs/writing-content/components/tooltip) with [reusable snippets](https://buildwithfern.com/learn/docs/writing-content/reusable-snippets) to maintain a single-source glossary. Define each term once in a snippet file, then reference it in tooltips throughout your documentation. + +## Set up glossary snippets + +Create a `snippets/glossary/` folder with one `.mdx` file per term. Each file contains only the definition text: + + + + + + + + + + + + + +```mdx title="snippets/glossary/perennial.mdx" +A plant that lives for more than two years, returning each growing season from its root system. +``` + +## Use snippets in tooltips + +Reference the snippet in a tooltip's `tip` attribute using the string syntax: + +
+
+ A perennial like lavender is a great choice for low-maintenance gardens. You can grow more plants through propagation, and you should always check your hardiness zone before planting. +
+
+ +````mdx title="Markdown" +A perennial like +lavender is a great choice for low-maintenance gardens. You can grow more plants through +propagation, +and you should always check your +hardiness zone +before planting. +```` + + +Snippet content used in tooltips should be **plain text only**. Markdown formatting like bold, links, or headings will not render inside the `tip` string attribute. + diff --git a/fern/snippets/glossary/hardiness-zone.mdx b/fern/snippets/glossary/hardiness-zone.mdx new file mode 100644 index 0000000..5867e37 --- /dev/null +++ b/fern/snippets/glossary/hardiness-zone.mdx @@ -0,0 +1 @@ +A geographic area defined by climatic conditions that determine which plants can thrive there. diff --git a/fern/snippets/glossary/perennial.mdx b/fern/snippets/glossary/perennial.mdx new file mode 100644 index 0000000..ae83fc5 --- /dev/null +++ b/fern/snippets/glossary/perennial.mdx @@ -0,0 +1 @@ +A plant that lives for more than two years, returning each growing season from its root system. diff --git a/fern/snippets/glossary/propagation.mdx b/fern/snippets/glossary/propagation.mdx new file mode 100644 index 0000000..63c2b20 --- /dev/null +++ b/fern/snippets/glossary/propagation.mdx @@ -0,0 +1 @@ +The process of creating new plants from seeds, cuttings, or other plant parts.