Add to library

`,children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"TooltipTrigger"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"Button"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:">"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"Hover"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"Tooltip"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"p"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:">"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"Add to library"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:""})]})]})})}),` `,(0,n.jsxs)(l.h3,{id:"position",children:[(0,n.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#position",children:(0,n.jsx)(l.span,{className:"icon icon-link"})}),"Position"]}),` `,(0,n.jsxs)(o,{name:"tooltip-position",children:[(0,n.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import { Button } from "@/components/ui/button" import { Tooltip, TooltipTrigger } from "@/components/ui/tooltip" export function TooltipPosition() { return (

Add to library

) } `,__src__:"registry/default/example/tooltip/tooltip-position.tsx",children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" Button "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'"@/components/ui/button"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" Tooltip"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" TooltipTrigger "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'"@/components/ui/tooltip"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"function"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:"TooltipPosition"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"()"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"div className"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'"flex gap-4"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"TooltipTrigger"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"Button variant"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'"outline"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:">"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"Left"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"Tooltip placement"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'"start"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"p"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:">"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"Add to library"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"TooltipTrigger"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"Button variant"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'"outline"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:">"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"Up"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"Tooltip placement"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'"top"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"p"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:">"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"Add to library"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"TooltipTrigger"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"Button variant"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'"outline"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:">"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"Down"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"Tooltip placement"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'"bottom"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"p"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:">"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"Add to library"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"TooltipTrigger"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"Button variant"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'"outline"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:">"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"Right"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"Tooltip placement"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'"end"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"p"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:">"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"Add to library"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:")"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "})]})})}),(0,n.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import { Button } from "@/components/ui/button" import { Tooltip, TooltipTrigger } from "@/components/ui/tooltip" export function TooltipPosition() { return (

Add to library

) } `,__src__:"registry/new-york/example/tooltip/tooltip-position.tsx",children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" Button "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'"@/components/ui/button"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" Tooltip"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" TooltipTrigger "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'"@/components/ui/tooltip"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"function"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:"TooltipPosition"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"()"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"div className"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'"flex gap-4"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"TooltipTrigger"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"Button variant"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'"outline"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:">"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"Left"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"Tooltip placement"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'"start"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"p"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:">"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"Add to library"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"TooltipTrigger"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"Button variant"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'"outline"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:">"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"Up"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"Tooltip placement"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'"top"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"p"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:">"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"Add to library"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"TooltipTrigger"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"Button variant"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'"outline"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:">"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"Down"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"Tooltip placement"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'"bottom"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"p"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:">"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"Add to library"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"TooltipTrigger"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"Button variant"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'"outline"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:">"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"Right"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"Tooltip placement"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'"end"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"p"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:">"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"Add to library"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:")"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "})]})})})]})]})}function P(e={}){let{wrapper:l}=e.components||{};return l?(0,n.jsx)(l,Object.assign({},e,{children:(0,n.jsx)(g,e)})):g(e)}var A=P;function s(e,l){throw new Error("Expected "+(l?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}return B(S);})(); ;return Component;

Tooltip

Installation

Install the following dependencies:

Copy and paste the following code into your project.

Update the import paths to match your project setup.

Usage

Position