Tail Kit

Component for rendering floating card popped by hovering on a trigger element. Generally, used for:

A simple popup menu to provide extra information or operations.
Comparing with Tooltip, besides information Popover card can also provide action elements like links and buttons.

Usage

The Popover component can be imported using

import { Popover } from '@tail-kit/tail-kit'

function NavbarDropdown() {
  const options = [
    {
      title: 'Designer Search',
      description: 'Find, contact, and hire designers',
      icon: 'icons/popover1.svg',
    },
    {
      title: 'List my Job Opening',
      description: 'The #1 Job board for creatives',
      icon: 'icons/popover2.svg',
    },
    {
      title: 'Post a Freelance Project',
      description: 'Board for freelance & contract work',
      icon: 'icons/popover3.svg',
    },
  ]
  return (
    <Popover
      content={
        <ul className="w-96 p-4">
          {options.map((option, index) => (
            <li
              key={index}
              className="group flex items-center rounded-lg space-x-4 p-4 hover:bg-gray-100 cursor-pointer"
            >
              <img src={option.icon} alt="" className="w-8 h-8 flex-none" />
              <div className="flex-1 text-sm">
                <p className="font-bold text-gray-800 mb-0.5 group-hover:text-pink-600">
                  {option.title}
                </p>
                <p className="text-gray-500">{option.description}</p>
              </div>
              <HiArrowRight className="text-pink-600 hidden group-hover:block" />
            </li>
          ))}
        </ul>
      }
      placement="bottomLeft"
      hideArrow
    >
      <Button buttonType="link" className="text-pink-400">
        Hire Designers
      </Button>
    </Popover>
  )
}

function NavbarDropdown() {
  const options = [
    {
      title: 'Designer Search',
      description: 'Find, contact, and hire designers',
      icon: 'icons/popover1.svg',
    },
    {
      title: 'List my Job Opening',
      description: 'The #1 Job board for creatives',
      icon: 'icons/popover2.svg',
    },
    {
      title: 'Post a Freelance Project',
      description: 'Board for freelance & contract work',
      icon: 'icons/popover3.svg',
    },
  ]
  return (
    <Popover
      content={
        <ul className="w-96 p-4">
          {options.map((option, index) => (
            <li
              key={index}
              className="group flex items-center rounded-lg space-x-4 p-4 hover:bg-gray-100 cursor-pointer"
            >
              <img src={option.icon} alt="" className="w-8 h-8 flex-none" />
              <div className="flex-1 text-sm">
                <p className="font-bold text-gray-800 mb-0.5 group-hover:text-pink-600">
                  {option.title}
                </p>
                <p className="text-gray-500">{option.description}</p>
              </div>
              <HiArrowRight className="text-pink-600 hidden group-hover:block" />
            </li>
          ))}
        </ul>
      }
      placement="bottomLeft"
      hideArrow
    >
      <Button buttonType="link" className="text-pink-400">
        Hire Designers
      </Button>
    </Popover>
  )
}

Editable Example

Brad Gibson

@bradgibson

function DefaultPopover() {
  const user = {
    name: {
      first: 'Brad',
      last: 'Gibson',
    },
    username: '@bradgibson',
    picture: {
      large: 'https://randomuser.me/api/portraits/men/75.jpg',
      medium: 'https://randomuser.me/api/portraits/med/men/75.jpg',
      thumbnail: 'https://randomuser.me/api/portraits/thumb/men/75.jpg',
    },
    bio: 'Developing UI-kit by day and using them in personal projects by night',
    follower: 200,
    following: 100,
  }
  const [following, setFollowing] = React.useState(false)
  return (
    <Popover
      content={
        <div className="w-64 px-4 py-3">
          <div className="flex items-center justify-between mb-4">
            <Avatar src={user.picture.large} size="large" />
            <Button
              buttonType={following ? 'primary' : 'default'}
              onClick={() => {
                setFollowing((prevState) => !prevState)
              }}
            >
              {following ? 'Following' : 'Follow'}
            </Button>
          </div>
          <div className="text-base font-medium text-gray-800">
            {user.name.first} {user.name.last}
          </div>
          <div className="mb-2 text-sm text-gray-400">{user.username}</div>
          <div className="mb-4 text-sm text-gray-600">{user.bio}</div>
          <div className="text-sm text-gray-500">
            <span className="mr-1 font-semibold text-gray-800 tabular-nums">
              {user.follower + (following ? 1 : 0)}
            </span>
            <span className="mr-6">Followers</span>
            <span className="mr-1 font-semibold text-gray-800 tabular-nums">
              {user.following}
            </span>
            <span>Following</span>
          </div>
        </div>
      }
    >
      <div className="flex items-center space-x-2">
        <Avatar src={user.picture.thumbnail} />
        <div>
          <div className="text-sm font-medium text-gray-600">
            {user.name.first} {user.name.last}
          </div>
          <div className="text-xs text-gray-400">{user.username}</div>
        </div>
      </div>
    </Popover>
  )
}

function DefaultPopover() {
  const user = {
    name: {
      first: 'Brad',
      last: 'Gibson',
    },
    username: '@bradgibson',
    picture: {
      large: 'https://randomuser.me/api/portraits/men/75.jpg',
      medium: 'https://randomuser.me/api/portraits/med/men/75.jpg',
      thumbnail: 'https://randomuser.me/api/portraits/thumb/men/75.jpg',
    },
    bio: 'Developing UI-kit by day and using them in personal projects by night',
    follower: 200,
    following: 100,
  }
  const [following, setFollowing] = React.useState(false)
  return (
    <Popover
      content={
        <div className="w-64 px-4 py-3">
          <div className="flex items-center justify-between mb-4">
            <Avatar src={user.picture.large} size="large" />
            <Button
              buttonType={following ? 'primary' : 'default'}
              onClick={() => {
                setFollowing((prevState) => !prevState)
              }}
            >
              {following ? 'Following' : 'Follow'}
            </Button>
          </div>
          <div className="text-base font-medium text-gray-800">
            {user.name.first} {user.name.last}
          </div>
          <div className="mb-2 text-sm text-gray-400">{user.username}</div>
          <div className="mb-4 text-sm text-gray-600">{user.bio}</div>
          <div className="text-sm text-gray-500">
            <span className="mr-1 font-semibold text-gray-800 tabular-nums">
              {user.follower + (following ? 1 : 0)}
            </span>
            <span className="mr-6">Followers</span>
            <span className="mr-1 font-semibold text-gray-800 tabular-nums">
              {user.following}
            </span>
            <span>Following</span>
          </div>
        </div>
      }
    >
      <div className="flex items-center space-x-2">
        <Avatar src={user.picture.thumbnail} />
        <div>
          <div className="text-sm font-medium text-gray-600">
            {user.name.first} {user.name.last}
          </div>
          <div className="text-xs text-gray-400">{user.username}</div>
        </div>
      </div>
    </Popover>
  )
}

Popover Trigger with Click Event

Brad Gibson

@bradgibson

function PopoverTriggerWithClickEvent() {
  const user = {
    name: {
      first: 'Brad',
      last: 'Gibson',
    },
    username: '@bradgibson',
    picture: {
      large: 'https://randomuser.me/api/portraits/men/75.jpg',
      medium: 'https://randomuser.me/api/portraits/med/men/75.jpg',
      thumbnail: 'https://randomuser.me/api/portraits/thumb/men/75.jpg',
    },
    bio: 'Developing UI-kit by day and using them in personal projects by night',
    follower: 200,
    following: 100,
  }
  const [following, setFollowing] = React.useState(false)
  return (
    <Popover
      triggerEvent="click"
      content={
        <div className="w-64 px-4 py-3">
          <div className="flex items-center justify-between mb-4">
            <Avatar src={user.picture.large} size="large" />
            <Button
              buttonType={following ? 'primary' : 'default'}
              onClick={() => {
                setFollowing((prevState) => !prevState)
              }}
            >
              {following ? 'Following' : 'Follow'}
            </Button>
          </div>
          <div className="text-base font-medium text-gray-800">
            {user.name.first} {user.name.last}
          </div>
          <div className="mb-2 text-sm text-gray-400">{user.username}</div>
          <div className="mb-4 text-sm text-gray-600">{user.bio}</div>
          <div className="text-sm text-gray-500">
            <span className="mr-1 font-semibold text-gray-800 tabular-nums">
              {user.follower + (following ? 1 : 0)}
            </span>
            <span className="mr-6">Followers</span>
            <span className="mr-1 font-semibold text-gray-800 tabular-nums">
              {user.following}
            </span>
            <span>Following</span>
          </div>
        </div>
      }
    >
      <div className="flex items-center space-x-2">
        <Avatar src={user.picture.thumbnail} />
        <div>
          <div className="text-sm font-medium text-gray-600">
            {user.name.first} {user.name.last}
          </div>
          <div className="text-xs text-gray-400">{user.username}</div>
        </div>
      </div>
    </Popover>
  )
}

function PopoverTriggerWithClickEvent() {
  const user = {
    name: {
      first: 'Brad',
      last: 'Gibson',
    },
    username: '@bradgibson',
    picture: {
      large: 'https://randomuser.me/api/portraits/men/75.jpg',
      medium: 'https://randomuser.me/api/portraits/med/men/75.jpg',
      thumbnail: 'https://randomuser.me/api/portraits/thumb/men/75.jpg',
    },
    bio: 'Developing UI-kit by day and using them in personal projects by night',
    follower: 200,
    following: 100,
  }
  const [following, setFollowing] = React.useState(false)
  return (
    <Popover
      triggerEvent="click"
      content={
        <div className="w-64 px-4 py-3">
          <div className="flex items-center justify-between mb-4">
            <Avatar src={user.picture.large} size="large" />
            <Button
              buttonType={following ? 'primary' : 'default'}
              onClick={() => {
                setFollowing((prevState) => !prevState)
              }}
            >
              {following ? 'Following' : 'Follow'}
            </Button>
          </div>
          <div className="text-base font-medium text-gray-800">
            {user.name.first} {user.name.last}
          </div>
          <div className="mb-2 text-sm text-gray-400">{user.username}</div>
          <div className="mb-4 text-sm text-gray-600">{user.bio}</div>
          <div className="text-sm text-gray-500">
            <span className="mr-1 font-semibold text-gray-800 tabular-nums">
              {user.follower + (following ? 1 : 0)}
            </span>
            <span className="mr-6">Followers</span>
            <span className="mr-1 font-semibold text-gray-800 tabular-nums">
              {user.following}
            </span>
            <span>Following</span>
          </div>
        </div>
      }
    >
      <div className="flex items-center space-x-2">
        <Avatar src={user.picture.thumbnail} />
        <div>
          <div className="text-sm font-medium text-gray-600">
            {user.name.first} {user.name.last}
          </div>
          <div className="text-xs text-gray-400">{user.username}</div>
        </div>
      </div>
    </Popover>
  )
}

function ControlledPopover() {
  const [popoverVisible, setPopoverVisible] = React.useState(false)
  return (
    <Popover
      visible={popoverVisible}
      onVisibilityChange={setPopoverVisible}
      title="Controlled Popover"
      triggerEvent="click"
      content={
        <div className="w-64 px-4 py-3">
          <div className="mb-4 text-sm text-gray-600">
            To close the Popover, click on the close button
          </div>
          <Button buttonType="danger" onClick={() => setPopoverVisible(false)}>
            Close Popover
          </Button>
        </div>
      }
    >
      <Button onClick={() => setPopoverVisible(true)}>
        Click to open Popover
      </Button>
    </Popover>
  )
}

function ControlledPopover() {
  const [popoverVisible, setPopoverVisible] = React.useState(false)
  return (
    <Popover
      visible={popoverVisible}
      onVisibilityChange={setPopoverVisible}
      title="Controlled Popover"
      triggerEvent="click"
      content={
        <div className="w-64 px-4 py-3">
          <div className="mb-4 text-sm text-gray-600">
            To close the Popover, click on the close button
          </div>
          <Button buttonType="danger" onClick={() => setPopoverVisible(false)}>
            Close Popover
          </Button>
        </div>
      }
    >
      <Button onClick={() => setPopoverVisible(true)}>
        Click to open Popover
      </Button>
    </Popover>
  )
}

Name	Description	Default Value
title	Title shown in the popover `ReactNode`	--
content	Content of the popover `ReactNode`	--
placement	The default placement of the tooltip. If the default placement cannot be used because of constraints, the tooltip placement would be computed automatically. It can be one of `topLeft`, `top`, `topRight`, `left`, `right`, `bottomLeft`, `bottom` and `bottomRight` `string \| undefined`	`top`
closeDelay	The delay in closing the tooltip on mouse leave. A delay is added so that the user can move over the tooltip content before being closed. If the delay is set to 0, it would close as soon as the mouse leaves, but the user cannot select the content present inside tooltip. `number \| undefined`	`100`
visible	Whether the popover is visible or not. If visible, it set the Popover component would be a controlled component, and the visibility state can be updated using `onVisiblityChange` prop. `boolean \| undefined`	--
onVisibilityChange	Handler function called when the visibility state is updated `OnVisibilityChange \| undefined`	--
triggerEvent	Event triggering the visiblity of popover. Whether is should be visible on hover or click `"click" \| "hover" \| undefined`	`hover`
hideArrow	Hide Arrow pointer of Popover `boolean \| undefined`	--
portalParent	parent of the portal container `HTMLElement \| undefined`	--
children	Content for which the tooltip is to be shown `ReactElement<any, string \| JSXElementConstructor<any>>`	--

Usage

Navbar Dropdown

Default Popover

Popover Trigger with Click Event

Controlled Popover

Popover Props

General

Feedback

Data Display

Data Entry

Survey

Navigation

Popover

Usage

Default Popover

Popover Trigger with Click Event

Controlled Popover

Popover Props