/*@jsxRuntime automatic @jsxImportSource react*/
const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
const {useMDXComponents: _provideComponents} = arguments[0];
function _createMdxContent(props) {
  const _components = Object.assign({
    pre: "pre",
    code: "code",
    span: "span",
    div: "div",
    h2: "h2",
    p: "p",
    a: "a",
    table: "table",
    thead: "thead",
    tr: "tr",
    th: "th",
    tbody: "tbody",
    td: "td"
  }, _provideComponents(), props.components), {CodeBlock, CodeBlockLineGroup, CodeBlockLine, PermanentLink, Code, QuickNav} = _components;
  if (!Code) _missingMdxReference("Code", true);
  if (!CodeBlock) _missingMdxReference("CodeBlock", true);
  if (!CodeBlockLine) _missingMdxReference("CodeBlockLine", true);
  if (!CodeBlockLineGroup) _missingMdxReference("CodeBlockLineGroup", true);
  if (!PermanentLink) _missingMdxReference("PermanentLink", true);
  if (!QuickNav) _missingMdxReference("QuickNav", false);
  if (!QuickNav.Heading) _missingMdxReference("QuickNav.Heading", true);
  if (!QuickNav.Item) _missingMdxReference("QuickNav.Item", true);
  if (!QuickNav.Link) _missingMdxReference("QuickNav.Link", true);
  if (!QuickNav.List) _missingMdxReference("QuickNav.List", true);
  if (!QuickNav.Root) _missingMdxReference("QuickNav.Root", true);
  return _jsxs(_Fragment, {
    children: [_jsxs(QuickNav.Root, {
      children: [_jsx(QuickNav.Heading, {}), _jsx(QuickNav.List, {
        children: _jsx(QuickNav.Item, {
          children: _jsx(QuickNav.Link, {
            href: "/tooltip/api-reference",
            children: "API Reference"
          })
        })
      })]
    }), _jsx(CodeBlock, {
      children: _jsx(_components.pre, {
        syntax: "jsx",
        live: "stack",
        children: _jsx(_components.code, {
          className: "language-jsx",
          children: _jsxs(CodeBlockLineGroup, {
            gutter: "numbers",
            children: [_jsxs(CodeBlockLine, {
              children: [_jsx(_components.span, {
                className: "token punctuation",
                children: "<"
              }), _jsx(_components.span, {
                className: "token class-name",
                children: "Tooltip"
              }), _jsx(_components.span, {
                className: "token tag",
                children: " "
              }), _jsx(_components.span, {
                className: "token attr-name",
                children: "content"
              }), _jsx(_components.span, {
                className: "token punctuation attr-equals",
                children: "="
              }), _jsx(_components.span, {
                className: "token punctuation",
                children: "\""
              }), _jsx(_components.span, {
                className: "token attr-value",
                children: "Add to library"
              }), _jsx(_components.span, {
                className: "token punctuation",
                children: "\""
              }), _jsx(_components.span, {
                className: "token punctuation",
                children: ">"
              }), "\n"]
            }), _jsxs(CodeBlockLine, {
              color: true,
              children: [_jsx(_components.span, {
                className: "token plain-text",
                children: "  "
              }), _jsx(_components.span, {
                className: "token punctuation",
                children: "<"
              }), _jsx(_components.span, {
                className: "token class-name",
                children: "IconButton"
              }), _jsx(_components.span, {
                className: "token punctuation",
                children: ">"
              }), "\n"]
            }), _jsxs(CodeBlockLine, {
              color: true,
              children: [_jsx(_components.span, {
                className: "token plain-text",
                children: "    "
              }), _jsx(_components.span, {
                className: "token punctuation",
                children: "<"
              }), _jsx(_components.span, {
                className: "token class-name",
                children: "PlusIcon"
              }), _jsx(_components.span, {
                className: "token tag",
                children: " "
              }), _jsx(_components.span, {
                className: "token punctuation",
                children: "/>"
              }), "\n"]
            }), _jsxs(CodeBlockLine, {
              color: true,
              children: [_jsx(_components.span, {
                className: "token plain-text",
                children: "  "
              }), _jsx(_components.span, {
                className: "token punctuation",
                children: "</"
              }), _jsx(_components.span, {
                className: "token class-name",
                children: "IconButton"
              }), _jsx(_components.span, {
                className: "token punctuation",
                children: ">"
              }), "\n"]
            }), _jsxs(CodeBlockLine, {
              color: true,
              children: [_jsx(_components.span, {
                className: "token punctuation",
                children: "</"
              }), _jsx(_components.span, {
                className: "token class-name",
                children: "Tooltip"
              }), _jsx(_components.span, {
                className: "token punctuation",
                children: ">"
              }), "\n"]
            })]
          })
        })
      })
    }), "\n", _jsxs(_components.div, {
      tabIndex: "-1",
      "data-section-slug": "/tooltip/api-reference",
      children: [_jsx(PermanentLink, {
        label: "Section titled API Reference",
        hidden: true,
        href: "/tooltip/api-reference",
        children: _jsx(_components.h2, {
          id: "/tooltip/api-reference",
          children: "API Reference"
        })
      }), "\n", _jsxs(_components.p, {
        children: ["This component inherits and merges props from the Radix Tooltip primitive ", _jsx(_components.a, {
          href: "https://www.radix-ui.com/primitives/docs/components/tooltip#root",
          children: "Root"
        }), ", ", _jsx(_components.a, {
          href: "https://www.radix-ui.com/primitives/docs/components/tooltip#portal",
          children: "Portal"
        }), " and ", _jsx(_components.a, {
          href: "https://www.radix-ui.com/primitives/docs/components/tooltip#content",
          children: "Content"
        }), " parts. It supports ", _jsx(_components.a, {
          href: "/themes/docs/overview/layout#margin-props",
          children: "common margin props"
        }), "."]
      }), "\n", _jsx(_components.div, {
        children: _jsxs(_components.table, {
          children: [_jsx(_components.thead, {
            children: _jsxs(_components.tr, {
              children: [_jsx(_components.th, {
                children: "Prop"
              }), _jsx(_components.th, {
                children: "Type"
              }), _jsx(_components.th, {
                children: "Default"
              })]
            })
          }), _jsxs(_components.tbody, {
            children: [_jsxs(_components.tr, {
              children: [_jsx(_components.th, {
                scope: "row",
                children: _jsx(Code, {
                  variant: "ghost",
                  children: "content"
                })
              }), _jsx(_components.td, {
                children: _jsx(Code, {
                  variant: "ghost",
                  children: _jsx(_components.span, {
                    className: "token class-name",
                    children: "ReactNode"
                  })
                })
              }), _jsx(_components.td, {
                children: _jsx(Code, {
                  variant: "ghost",
                  children: "–"
                })
              })]
            }), _jsxs(_components.tr, {
              children: [_jsx(_components.th, {
                scope: "row",
                children: _jsx(Code, {
                  variant: "ghost",
                  children: "width"
                })
              }), _jsx(_components.td, {
                children: _jsxs(Code, {
                  variant: "ghost",
                  children: [_jsx(_components.span, {
                    className: "token class-name",
                    children: "Responsive"
                  }), _jsx(_components.span, {
                    className: "token operator",
                    children: "<"
                  }), _jsx(_components.span, {
                    className: "token keyword",
                    children: "string"
                  }), _jsx(_components.span, {
                    className: "token operator",
                    children: ">"
                  })]
                })
              }), _jsx(_components.td, {
                children: _jsx(Code, {
                  variant: "ghost",
                  children: "–"
                })
              })]
            }), _jsxs(_components.tr, {
              children: [_jsx(_components.th, {
                scope: "row",
                children: _jsx(Code, {
                  variant: "ghost",
                  children: "minWidth"
                })
              }), _jsx(_components.td, {
                children: _jsxs(Code, {
                  variant: "ghost",
                  children: [_jsx(_components.span, {
                    className: "token class-name",
                    children: "Responsive"
                  }), _jsx(_components.span, {
                    className: "token operator",
                    children: "<"
                  }), _jsx(_components.span, {
                    className: "token keyword",
                    children: "string"
                  }), _jsx(_components.span, {
                    className: "token operator",
                    children: ">"
                  })]
                })
              }), _jsx(_components.td, {
                children: _jsx(Code, {
                  variant: "ghost",
                  children: "–"
                })
              })]
            }), _jsxs(_components.tr, {
              children: [_jsx(_components.th, {
                scope: "row",
                children: _jsx(Code, {
                  variant: "ghost",
                  children: "maxWidth"
                })
              }), _jsx(_components.td, {
                children: _jsxs(Code, {
                  variant: "ghost",
                  children: [_jsx(_components.span, {
                    className: "token class-name",
                    children: "Responsive"
                  }), _jsx(_components.span, {
                    className: "token operator",
                    children: "<"
                  }), _jsx(_components.span, {
                    className: "token keyword",
                    children: "string"
                  }), _jsx(_components.span, {
                    className: "token operator",
                    children: ">"
                  })]
                })
              }), _jsx(_components.td, {
                children: _jsx(Code, {
                  variant: "ghost",
                  children: "–"
                })
              })]
            })]
          })]
        })
      })]
    })]
  });
}
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {
    children: _jsx(_createMdxContent, props)
  })) : _createMdxContent(props);
}
return {
  default: MDXContent
};
function _missingMdxReference(id, component) {
  throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it.");
}


Introduction

Usage

Theme

Overview

Container

Flex

Grid

Section

Layout

Text

Heading

Typography

Accordion

Alert Dialog

Avatar

Badge

Blockquote

Button

Callout

Card

Card List

Checkbox

Chip

Code Block

Code Editor

Color Field

Data List

Definition List

Dialog

Hover Card

Icon Button

Inset

Image Field

Label

Marker

Permanent Link

Popover

Progress

Radio Group

Radio Cards

Screenshot

Scroll Area

Segmented Control

Select

Separator

Skeleton

Spinner

Status

Switch

Table

Tabs

Tab Nav

Text Area

Text Field

Tooltip

Zoomable

Components

Code

Quote

Strong

Formatting

Logo Icon

Feature Icon

Provider Icon

Icon Panel

Icons

Page Nav

Quick Nav

Navigation

Design System Provider

Utilities

Copy Button

Copy Chip

Theme Toggle

Recipes

WorkDS

Floating element that provides a control with contextual information via pointer or focus.

Prop	Type	Default
`content`	`ReactNode`
`width`	`Responsive<string>`
`minWidth`	`Responsive<string>`
`maxWidth`	`Responsive<string>`