{placements.map((placement, idx) => ( Hello! ))}

) }`,children:(0,n.jsx)(l.pre,{style:{backgroundColor:"#282A36",color:"#F8F8F2"},tabIndex:"0","data-language":"tsx","data-theme":"dracula",children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"dracula",style:{display:"grid"},children:[(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#FF79C6"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#F8F8F2"},children:" { "}),(0,n.jsx)(l.span,{style:{color:"#FF79C6"},children:"type"}),(0,n.jsx)(l.span,{style:{color:"#F8F8F2"},children:" TooltipProps } "}),(0,n.jsx)(l.span,{style:{color:"#FF79C6"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#E9F284"},children:" '"}),(0,n.jsx)(l.span,{style:{color:"#F1FA8C"},children:"react-aria-components"}),(0,n.jsx)(l.span,{style:{color:"#E9F284"},children:"'"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#FF79C6"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#F8F8F2"},children:" { Button, Tooltip, TooltipContent } "}),(0,n.jsx)(l.span,{style:{color:"#FF79C6"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#E9F284"},children:" '"}),(0,n.jsx)(l.span,{style:{color:"#F1FA8C"},children:"ui"}),(0,n.jsx)(l.span,{style:{color:"#E9F284"},children:"'"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#FF79C6"},children:"type"}),(0,n.jsx)(l.span,{style:{color:"#8BE9FD",fontStyle:"italic"},children:" Placement"}),(0,n.jsx)(l.span,{style:{color:"#FF79C6"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#8BE9FD",fontStyle:"italic"},children:" Pick"}),(0,n.jsx)(l.span,{style:{color:"#F8F8F2"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#FFB86C",fontStyle:"italic"},children:"TooltipProps"}),(0,n.jsx)(l.span,{style:{color:"#F8F8F2"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#E9F284"},children:"'"}),(0,n.jsx)(l.span,{style:{color:"#F1FA8C"},children:"placement"}),(0,n.jsx)(l.span,{style:{color:"#E9F284"},children:"'"}),(0,n.jsx)(l.span,{style:{color:"#F8F8F2"},children:">["}),(0,n.jsx)(l.span,{style:{color:"#E9F284"},children:"'"}),(0,n.jsx)(l.span,{style:{color:"#F1FA8C"},children:"placement"}),(0,n.jsx)(l.span,{style:{color:"#E9F284"},children:"'"}),(0,n.jsx)(l.span,{style:{color:"#F8F8F2"},children:"]"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#FF79C6"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#FF79C6"},children:" function"}),(0,n.jsx)(l.span,{style:{color:"#50FA7B"},children:" Placement"}),(0,n.jsx)(l.span,{style:{color:"#F8F8F2"},children:"() {"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#FF79C6"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#F8F8F2"},children:" placements"}),(0,n.jsx)(l.span,{style:{color:"#FF79C6"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#8BE9FD",fontStyle:"italic"},children:" Placement"}),(0,n.jsx)(l.span,{style:{color:"#F8F8F2"},children:"[] "}),(0,n.jsx)(l.span,{style:{color:"#FF79C6"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#F8F8F2"},children:" ["})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E9F284"},children:" '"}),(0,n.jsx)(l.span,{style:{color:"#F1FA8C"},children:"bottom"}),(0,n.jsx)(l.span,{style:{color:"#E9F284"},children:"'"}),(0,n.jsx)(l.span,{style:{color:"#F8F8F2"},children:","})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E9F284"},children:" '"}),(0,n.jsx)(l.span,{style:{color:"#F1FA8C"},children:"bottom left"}),(0,n.jsx)(l.span,{style:{color:"#E9F284"},children:"'"}),(0,n.jsx)(l.span,{style:{color:"#F8F8F2"},children:","})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E9F284"},children:" '"}),(0,n.jsx)(l.span,{style:{color:"#F1FA8C"},children:"bottom right"}),(0,n.jsx)(l.span,{style:{color:"#E9F284"},children:"'"}),(0,n.jsx)(l.span,{style:{color:"#F8F8F2"},children:","})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E9F284"},children:" '"}),(0,n.jsx)(l.span,{style:{color:"#F1FA8C"},children:"bottom start"}),(0,n.jsx)(l.span,{style:{color:"#E9F284"},children:"'"}),(0,n.jsx)(l.span,{style:{color:"#F8F8F2"},children:","})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E9F284"},children:" '"}),(0,n.jsx)(l.span,{style:{color:"#F1FA8C"},children:"bottom end"}),(0,n.jsx)(l.span,{style:{color:"#E9F284"},children:"'"}),(0,n.jsx)(l.span,{style:{color:"#F8F8F2"},children:","})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E9F284"},children:" '"}),(0,n.jsx)(l.span,{style:{color:"#F1FA8C"},children:"top"}),(0,n.jsx)(l.span,{style:{color:"#E9F284"},children:"'"}),(0,n.jsx)(l.span,{style:{color:"#F8F8F2"},children:","})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E9F284"},children:" '"}),(0,n.jsx)(l.span,{style:{color:"#F1FA8C"},children:"top left"}),(0,n.jsx)(l.span,{style:{color:"#E9F284"},children:"'"}),(0,n.jsx)(l.span,{style:{color:"#F8F8F2"},children:","})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E9F284"},children:" '"}),(0,n.jsx)(l.span,{style:{color:"#F1FA8C"},children:"top right"}),(0,n.jsx)(l.span,{style:{color:"#E9F284"},children:"'"}),(0,n.jsx)(l.span,{style:{color:"#F8F8F2"},children:","})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E9F284"},children:" '"}),(0,n.jsx)(l.span,{style:{color:"#F1FA8C"},children:"top start"}),(0,n.jsx)(l.span,{style:{color:"#E9F284"},children:"'"}),(0,n.jsx)(l.span,{style:{color:"#F8F8F2"},children:","})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E9F284"},children:" '"}),(0,n.jsx)(l.span,{style:{color:"#F1FA8C"},children:"top end"}),(0,n.jsx)(l.span,{style:{color:"#E9F284"},children:"'"}),(0,n.jsx)(l.span,{style:{color:"#F8F8F2"},children:","})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E9F284"},children:" '"}),(0,n.jsx)(l.span,{style:{color:"#F1FA8C"},children:"left"}),(0,n.jsx)(l.span,{style:{color:"#E9F284"},children:"'"}),(0,n.jsx)(l.span,{style:{color:"#F8F8F2"},children:","})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E9F284"},children:" '"}),(0,n.jsx)(l.span,{style:{color:"#F1FA8C"},children:"left top"}),(0,n.jsx)(l.span,{style:{color:"#E9F284"},children:"'"}),(0,n.jsx)(l.span,{style:{color:"#F8F8F2"},children:","})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E9F284"},children:" '"}),(0,n.jsx)(l.span,{style:{color:"#F1FA8C"},children:"left bottom"}),(0,n.jsx)(l.span,{style:{color:"#E9F284"},children:"'"}),(0,n.jsx)(l.span,{style:{color:"#F8F8F2"},children:","})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E9F284"},children:" '"}),(0,n.jsx)(l.span,{style:{color:"#F1FA8C"},children:"start"}),(0,n.jsx)(l.span,{style:{color:"#E9F284"},children:"'"}),(0,n.jsx)(l.span,{style:{color:"#F8F8F2"},children:","})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E9F284"},children:" '"}),(0,n.jsx)(l.span,{style:{color:"#F1FA8C"},children:"start top"}),(0,n.jsx)(l.span,{style:{color:"#E9F284"},children:"'"}),(0,n.jsx)(l.span,{style:{color:"#F8F8F2"},children:","})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E9F284"},children:" '"}),(0,n.jsx)(l.span,{style:{color:"#F1FA8C"},children:"start bottom"}),(0,n.jsx)(l.span,{style:{color:"#E9F284"},children:"'"}),(0,n.jsx)(l.span,{style:{color:"#F8F8F2"},children:","})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E9F284"},children:" '"}),(0,n.jsx)(l.span,{style:{color:"#F1FA8C"},children:"right"}),(0,n.jsx)(l.span,{style:{color:"#E9F284"},children:"'"}),(0,n.jsx)(l.span,{style:{color:"#F8F8F2"},children:","})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E9F284"},children:" '"}),(0,n.jsx)(l.span,{style:{color:"#F1FA8C"},children:"right top"}),(0,n.jsx)(l.span,{style:{color:"#E9F284"},children:"'"}),(0,n.jsx)(l.span,{style:{color:"#F8F8F2"},children:","})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E9F284"},children:" '"}),(0,n.jsx)(l.span,{style:{color:"#F1FA8C"},children:"right bottom"}),(0,n.jsx)(l.span,{style:{color:"#E9F284"},children:"'"}),(0,n.jsx)(l.span,{style:{color:"#F8F8F2"},children:","})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E9F284"},children:" '"}),(0,n.jsx)(l.span,{style:{color:"#F1FA8C"},children:"end"}),(0,n.jsx)(l.span,{style:{color:"#E9F284"},children:"'"}),(0,n.jsx)(l.span,{style:{color:"#F8F8F2"},children:","})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E9F284"},children:" '"}),(0,n.jsx)(l.span,{style:{color:"#F1FA8C"},children:"end top"}),(0,n.jsx)(l.span,{style:{color:"#E9F284"},children:"'"}),(0,n.jsx)(l.span,{style:{color:"#F8F8F2"},children:","})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#E9F284"},children:" '"}),(0,n.jsx)(l.span,{style:{color:"#F1FA8C"},children:"end bottom"}),(0,n.jsx)(l.span,{style:{color:"#E9F284"},children:"'"}),(0,n.jsx)(l.span,{style:{color:"#F8F8F2"},children:","})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F8F8F2"},children:" ]"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#FF79C6"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#F8F8F2"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F8F8F2"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FF79C6"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#50FA7B",fontStyle:"italic"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#FF79C6"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E9F284"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F1FA8C"},children:"grid grid-cols-4 gap-4"}),(0,n.jsx)(l.span,{style:{color:"#E9F284"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F8F8F2"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F8F8F2"},children:" {placements."}),(0,n.jsx)(l.span,{style:{color:"#50FA7B"},children:"map"}),(0,n.jsx)(l.span,{style:{color:"#F8F8F2"},children:"(("}),(0,n.jsx)(l.span,{style:{color:"#FFB86C",fontStyle:"italic"},children:"placement"}),(0,n.jsx)(l.span,{style:{color:"#F8F8F2"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#FFB86C",fontStyle:"italic"},children:"idx"}),(0,n.jsx)(l.span,{style:{color:"#F8F8F2"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#FF79C6"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#F8F8F2"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F8F8F2"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#8BE9FD",fontStyle:"italic"},children:"Tooltip"}),(0,n.jsx)(l.span,{style:{color:"#50FA7B",fontStyle:"italic"},children:" key"}),(0,n.jsx)(l.span,{style:{color:"#FF79C6"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#F8F8F2"},children:"{idx}>"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F8F8F2"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#8BE9FD",fontStyle:"italic"},children:"Button"}),(0,n.jsx)(l.span,{style:{color:"#50FA7B",fontStyle:"italic"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#FF79C6"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E9F284"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F1FA8C"},children:"mx-auto"}),(0,n.jsx)(l.span,{style:{color:"#E9F284"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#50FA7B",fontStyle:"italic"},children:" size"}),(0,n.jsx)(l.span,{style:{color:"#FF79C6"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E9F284"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F1FA8C"},children:"sm"}),(0,n.jsx)(l.span,{style:{color:"#E9F284"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#50FA7B",fontStyle:"italic"},children:" variant"}),(0,n.jsx)(l.span,{style:{color:"#FF79C6"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E9F284"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F1FA8C"},children:"outline"}),(0,n.jsx)(l.span,{style:{color:"#E9F284"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F8F8F2"},children:">"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F8F8F2"},children:" {placement}"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F8F8F2"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F8F8F2"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#8BE9FD",fontStyle:"italic"},children:"TooltipContent"}),(0,n.jsx)(l.span,{style:{color:"#50FA7B",fontStyle:"italic"},children:" placement"}),(0,n.jsx)(l.span,{style:{color:"#FF79C6"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#F8F8F2"},children:"{placement}>Hello!"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F8F8F2"},children:" "})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F8F8F2"},children:" ))}"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F8F8F2"},children:" "})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F8F8F2"},children:" )"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F8F8F2"},children:"}"})})]})})})})]})}function _(e={}){let{wrapper:l}=e.components||{};return l?(0,n.jsx)(l,Object.assign({},e,{children:(0,n.jsx)(m,e)})):m(e)}var S=_;function r(e,l){throw new Error("Expected "+(l?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}return T(D);})(); ;return Component;

Tooltip

Installation

Examples

Default

Placement