mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-14 18:01:06 +00:00
Code Issues Projects Releases Packages Wiki Activity

docs(tooltip-definition): improve docs

Browse source
This commit is contained in:
Eric Liu 2025-05-03 11:07:25 -07:00
commit 137966e6f8
1 changed files with 7 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

10
docs/src/pages/components/TooltipDefinition.svx
View file

@ -3,17 +3,19 @@
import Preview from "../../components/Preview.svelte"; import Preview from "../../components/Preview.svelte";
</script> </script>
`TooltipDefinition` provides inline definitions for terms or concepts. It displays a tooltip when users hover over or focus on the defined term, making it ideal for providing additional context without cluttering the interface.
## Default ## Default
Display a basic definition tooltip with the default bottom-center alignment.
<TooltipDefinition tooltipText="IBM Corporate Headquarters is based in Armonk, New York."> <TooltipDefinition tooltipText="IBM Corporate Headquarters is based in Armonk, New York.">
Armonk Armonk
</TooltipDefinition> </TooltipDefinition>
## Custom tooltip direction and alignment ## Custom tooltip direction and alignment
Customize the tooltip menu direction and alignment through the `direction` and `align` props. Customize the tooltip position using the `direction` and `align` props. The default direction is `"bottom"` and alignment is `"center"`.
By default, `direction` is `"bottom"` and `align` is `"center"`.
<TooltipDefinition direction="top" align="start" tooltipText="IBM Corporate Headquarters is based in Armonk, New York."> <TooltipDefinition direction="top" align="start" tooltipText="IBM Corporate Headquarters is based in Armonk, New York.">
Armonk Armonk
@ -21,6 +23,8 @@ By default, `direction` is `"bottom"` and `align` is `"center"`.
## Custom tooltip slot ## Custom tooltip slot
Use the `tooltip` slot to customize the tooltip content with additional styling or structure.
<TooltipDefinition> <TooltipDefinition>
Armonk Armonk
<span slot="tooltip" style="color: red"> <span slot="tooltip" style="color: red">