import React from "react" ; import type { Story } from "@storybook/react" ; import { action } from "@storybook/addon-actions" ; import { Tooltip , TooltipProps , Button } from "@okta/odyssey-react" ; import { Tooltip as Source } from "../../../../odyssey-react/src" ; import TooltipMdx from "./Tooltip.mdx" ; export default { title : `Components/Tooltip` , component : Source , parameters : { layout : "centered" , docs : { page : TooltipMdx } } } ; const Template = ( ) => ( < > < Tooltip label = "Top tooltip label" position = "top" > < Button variant = "primary" onClick = { action ( "Top button clicked" ) } > Top < /Button> < /Tooltip> < Tooltip label = "Ending tooltip label" position = "end" > < Button onClick = { action ( "Ending button clicked" ) } variant = "clear" > End < /Button> < /Tooltip> < Tooltip label = "Bottom tooltip label" position = "bottom" > < Button onClick = { action ( "Bottom button clicked" ) } variant = "clear" > Bottom < /Button> < /Tooltip> < Tooltip label = "Starting tooltip label" position = "start" > < Button onClick = { action ( "Starting button clicked" ) } variant = "clear" > Start < /Button> < /Tooltip> < />); export const Default = Template . bind ( { } ) ;