Homepage
Homepage
ThemesThemesHooksHooksColorsColorsIconsIcons

Hover Card

For sighted users to preview content available behind a link.

View sourceReport an issueView in Playground
Follow @teasim for updates.
<Text>

  Follow{" "}

  <HoverCard.Root>

    <HoverCard.Trigger>

      <Link href="#" href="https://twitter.com/teasim" target="_blank">

        @teasim

      </Link>

    </HoverCard.Trigger>

    <HoverCard.Content maxWidth="300px">

      <Flex gap="4">

        <Avatar size="3" fallback="R" radius="full" src="https://pbs.twimg.com/profile_images/1337055608613253126/r_eiMp2H_400x400.png" />

        <Box>

          <Heading size="3" as="h3">

            Teasim

          </Heading>

          <Text as="div" size="2" color="gray" mb="2">

            @teasim

          </Text>

          <Text as="div" size="2">

            React components, icons, and colors for building high-quality, accessible UI.

          </Text>

        </Box>

      </Flex>

    </HoverCard.Content>

  </HoverCard.Root>{" "}

  for updates.

</Text>

API Reference

This component inherits props from the Hover Card primitive.

Root

Contains all the parts of the hover card.

Trigger

Wraps the link that will open the hover card.

Content

Contains the content of the open hover card. This component is based on the div element.

PropTypeDefault
asChild
boolean
No default value
size
Responsive<"1" | "2" | "3">
"2"
width
Responsive<string>
No default value
minWidth
Responsive<string>
No default value
maxWidth
Responsive<string>
"480px"
height
Responsive<string>
No default value
minHeight
Responsive<string>
No default value
maxHeight
Responsive<string>
No default value

Examples

Size

Use the size prop to control the size.

<Flex gap="4">

  <HoverCard.Root>

    <HoverCard.Trigger>

      <Link href="#">Size 1</Link>

    </HoverCard.Trigger>

    <HoverCard.Content size="1" maxWidth="240px">

      <Text as="div" size="1" trim="both">

        <Strong>Typography</Strong> is the art and technique of arranging type to make written language legible, readable and appealing when displayed.

      </Text>

    </HoverCard.Content>

  </HoverCard.Root>



  <HoverCard.Root>

    <HoverCard.Trigger>

      <Link href="#">Size 2</Link>

    </HoverCard.Trigger>

    <HoverCard.Content size="2" maxWidth="280px">

      <Text as="div" size="2" trim="both">

        <Strong>Typography</Strong> is the art and technique of arranging type to make written language legible, readable and appealing when displayed.

      </Text>

    </HoverCard.Content>

  </HoverCard.Root>



  <HoverCard.Root>

    <HoverCard.Trigger>

      <Link href="#">Size 3</Link>

    </HoverCard.Trigger>

    <HoverCard.Content size="3" maxWidth="320px">

      <Text as="div" size="3" trim="both">

        <Strong>Typography</Strong> is the art and technique of arranging type to make written language legible, readable and appealing when displayed.

      </Text>

    </HoverCard.Content>

  </HoverCard.Root>

</Flex>

With inset content

Use the Inset component to align content flush with the sides of the hover card.

Technology revolutionized typography in the latter twentieth century.
<Text>

  Technology revolutionized{" "}

  <HoverCard.Root>

    <HoverCard.Trigger>

      <Link href="#">typography</Link>

    </HoverCard.Trigger>



    <HoverCard.Content width="450px">

      <Flex>

        <Box asChild flexShrink="0">

          <Inset side="left" pr="current">

            <img
              src="https://images.unsplash.com/photo-1617050318658-a9a3175e34cb?&auto=format&fit=crop&w=300&q=90"
              alt="Bold typography"
              style={{
                display: "block",
                objectFit: "cover",
                height: "100%",
                width: 150,
                backgroundColor: "var(--gray-5)",
              }}
            />

          </Inset>

        </Box>



        <Text size="2" as="p">

          <Strong>Typography</Strong> is the art and technique of arranging type to make written language legible, readable and appealing when displayed. The

          arrangement of type involves selecting typefaces, point sizes, line lengths, line-spacing (leading), and letter-spacing (tracking)…

        </Text>

      </Flex>

    </HoverCard.Content>

  </HoverCard.Root>{" "}

  in the latter twentieth century.

</Text>
PreviousDropdown Menu
NextIcon Button
Edit this page on GitHub.