Popover

The TkPopover displays additional information when triggered. By default, it opens when clicked, but can also be configured to open on hover.

React

import { TkPopover } from '@takeoff-ui/react'

Vue

import { TkPopover } from '@takeoff-ui/vue'

Angular

import { TkPopover } from '@takeoff-ui/angular'

Basic

This is a popover

View Code

React

<TkPopover type="basic">
  <TkButton slot="trigger" label="Click Me!"></TkButton>
  <div slot="content" >
    <h4>This is a popover</h4>
  </div>
</TkPopover>

Vue

<TkPopover type="basic">
  <TkButton slot="trigger" label="Click Me!"></TkButton>
  <div slot="content" class="flex flex-col gap-2 w-[300px]">
    <div>This is a popover</div>
  </div>
</TkPopover>

Angular

Types

Provides 3 different types dark, white, basic with type property.

Popover Header

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.

Popover Header

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.

Popover Header

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.

View Code

React

<TkPopover type="basic">
  <TkButton slot="trigger" label="Click Me!"></TkButton>
  <div slot="content" className="flex flex-col gap-2 w-[300px]">
    <div className="flex gap-2">
      <TkIcon icon="bolt" variant="neutral" sign />
      <span className="text-lg font-bold text-neutral-900">
        Popover Header
      </span>
    </div>
    <div className="flex flex-col gap-2">
      <span>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
        quos.
      </span>
    </div>
  </div>
</TkPopover>

<TkPopover type="white">
  <TkButton slot="trigger" label="Click Me!"></TkButton>
  <div slot="content" className="flex flex-col gap-2 w-[300px]">
    <div className="flex gap-2">
      <TkIcon icon="bolt" variant="neutral" sign />
      <span className="text-lg font-bold text-neutral-900">
        Popover Header
      </span>
    </div>
    <div className="flex flex-col gap-2">
      <span>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
        quos.
      </span>
    </div>
  </div>
</TkPopover>

<TkPopover type="dark">
  <TkButton slot="trigger" label="Click Me!"></TkButton>
  <div slot="content" className="flex flex-col gap-2 w-[300px]">
    <div className="flex gap-2">
      <TkIcon icon="bolt" variant="neutral" sign />
      <span className="text-lg font-bold text-neutral-100">
        Popover Header
      </span>
    </div>
    <div className="flex flex-col gap-2 text-neutral-100">
      <span>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
        quos.
      </span>
    </div>
  </div>
</TkPopover>

Vue

<TkPopover type="basic">
  <TkButton slot="trigger" label="Click Me!"></TkButton>
  <div slot="content" class="flex flex-col gap-2 w-[300px]">
    <div class="flex gap-2">
      <TkIcon icon="bolt" variant="neutral" sign />
      <span class="text-lg font-bold text-neutral-900">
        Popover Header
      </span>
    </div>
    <div class="flex flex-col gap-2">
      <span>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
        quos.
      </span>
    </div>
  </div>
</TkPopover>

<TkPopover type="white">
  <TkButton slot="trigger" label="Click Me!"></TkButton>
  <div slot="content" class="flex flex-col gap-2 w-[300px]">
    <div class="flex gap-2">
      <TkIcon icon="bolt" variant="neutral" sign />
      <span class="text-lg font-bold text-neutral-900">
        Popover Header
      </span>
    </div>
    <div class="flex flex-col gap-2">
      <span>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
        quos.
      </span>
    </div>
  </div>
</TkPopover>

<TkPopover type="dark">
  <TkButton slot="trigger" label="Click Me!"></TkButton>
  <div slot="content" class="flex flex-col gap-2 w-[300px]">
    <div class="flex gap-2">
      <TkIcon icon="bolt" variant="neutral" sign />
      <span class="text-lg font-bold text-neutral-100">
        Popover Header
      </span>
    </div>
    <div class="flex flex-col gap-2 text-neutral-100">
      <span>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
        quos.
      </span>
    </div>
  </div>
</TkPopover>

Angular

Position

Establishes 12 different placement position top-start, top, top-end, right-start, right, right-end, bottom-start, bottom, bottom-end, left-start, left, left-end via position property.

Popover Header

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.

Popover Header

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.

Popover Header

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.

Popover Header

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.

Popover Header

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.

Popover Header

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.

Popover Header

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.

Popover Header

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.

Popover Header

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.

Popover Header

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.

Popover Header

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.

Popover Header

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.

View Code

React

<TkPopover position="top-start">
  <TkButton slot="trigger" label="Top Start" />
  <div slot="content" className="flex flex-col gap-2 w-[300px]">
    <div className="flex gap-2">
     <TkIcon icon="bolt" variant="neutral" sign />
      <span className="text-lg font-bold text-neutral-900">
        Popover Header
      </span>
    </div>
    <div className="flex flex-col gap-2">
      <span>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
        quos.
      </span>
    </div>
  </div>
</TkPopover>
<TkPopover position="top">
  <TkButton slot="trigger" label="Top" />
  <div slot="content" className="flex flex-col gap-2 w-[300px]">
    <div className="flex gap-2">
      <TkIcon icon="bolt" variant="neutral" sign />
      <span className="text-lg font-bold text-neutral-900">
        Popover Header
      </span>
    </div>
    <div className="flex flex-col gap-2">
      <span>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
        quos.
      </span>
    </div>
  </div>
</TkPopover>
<TkPopover position="top-end">
  <TkButton slot="trigger" label="Top End" />
  <div slot="content" className="flex flex-col gap-2 w-[300px]">
    <div className="flex gap-2">
      <TkIcon icon="bolt" variant="neutral" sign />
      <span className="text-lg font-bold text-neutral-900">
          Popover Header
        </span>
    </div>
    <div className="flex flex-col gap-2">
      <span>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
        quos.
      </span>
    </div>
  </div>
</TkPopover>
<TkPopover position="right-start">
  <TkButton slot="trigger" label="Right Start" />
  <div slot="content" className="flex flex-col gap-2 w-[300px]">
    <div className="flex gap-2">
      <TkIcon icon="bolt" variant="neutral" sign />
      <span className="text-lg font-bold text-neutral-900">
        Popover Header
      </span>
    </div>
    <div className="flex flex-col gap-2">
      <span>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
        quos.
      </span>
    </div>
  </div>
</TkPopover>
<TkPopover position="right">
  <TkButton slot="trigger" label="Right" />
  <div slot="content" className="flex flex-col gap-2 w-[300px]">    
    <div className="flex gap-2">
      <TkIcon icon="bolt" variant="neutral" sign />
      <span className="text-lg font-bold text-neutral-900">
        Popover Header
      </span>
    </div>
    <div className="flex flex-col gap-2">
      <span>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
        quos.
      </span>
    </div>
  </div>
</TkPopover>
<TkPopover position="right-end">
  <TkButton slot="trigger" label="Right End" />
  <div slot="content" className="flex flex-col gap-2 w-[300px]">
    <div className="flex gap-2">
      <TkIcon icon="bolt" variant="neutral" sign />
      <span className="text-lg font-bold text-neutral-900">
        Popover Header
      </span>
    </div>
    <div className="flex flex-col gap-2">
      <span>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
        quos.
      </span>
    </div>
  </div>
</TkPopover>
<TkPopover position="left-start">
  <TkButton slot="trigger" label="Left Start" />
  <div slot="content" className="flex flex-col gap-2 w-[300px]">
    <div className="flex gap-2">
      <TkIcon icon="bolt" variant="neutral" sign />
      <span className="text-lg font-bold text-neutral-900">
        Popover Header
      </span>
    </div>
    <div className="flex flex-col gap-2">
      <span>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
        quos.
      </span>
    </div>
  </div>
</TkPopover>
<TkPopover position="left">
  <TkButton slot="trigger" label="Left" />
  <div slot="content" className="flex flex-col gap-2 w-[300px]">    
    <div className="flex gap-2">
      <TkIcon icon="bolt" variant="neutral" sign />
      <span className="text-lg font-bold text-neutral-900">
        Popover Header
      </span>
    </div>
    <div className="flex flex-col gap-2">
      <span>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
        quos.
      </span>
    </div>
  </div>
</TkPopover>
<TkPopover position="left-end">
  <TkButton slot="trigger" label="Left End" />
  <div slot="content" className="flex flex-col gap-2 w-[300px]">
    <div className="flex gap-2">
      <TkIcon icon="bolt" variant="neutral" sign />
      <span className="text-lg font-bold text-neutral-900">
        Popover Header
      </span>
    </div>
    <div className="flex flex-col gap-2">
      <span>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
        quos.
      </span>
    </div>
  </div>
</TkPopover>
<TkPopover position="bottom-start">
  <TkButton slot="trigger" label="Bottom Start" />
  <div slot="content" className="flex flex-col gap-2 w-[300px]">
    <div className="flex gap-2">
      <TkIcon icon="bolt" variant="neutral" sign />
      <span className="text-lg font-bold text-neutral-900">
        Popover Header
      </span>
    </div>
    <div className="flex flex-col gap-2">
      <span>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
        quos.
      </span>
    </div>
  </div>
</TkPopover>
<TkPopover position="bottom">
  <TkButton slot="trigger" label="Bottom" />
  <div slot="content" className="flex flex-col gap-2 w-[300px]">
    <div className="flex gap-2">
      <TkIcon icon="bolt" variant="neutral" sign />
      <span className="text-lg font-bold text-neutral-900">
        Popover Header
      </span>
    </div>
    <div className="flex flex-col gap-2">
      <span>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
        quos.
      </span>
    </div>
  </div>
</TkPopover>
<TkPopover position="bottom-end">
  <TkButton slot="trigger" label="Bottom End" />
  <div slot="content" className="flex flex-col gap-2 w-[300px]">
    <div className="flex gap-2">
      <TkIcon icon="bolt" variant="neutral" sign />
      <span className="text-lg font-bold text-neutral-900">
        Popover Header
      </span>
    </div>
    <div className="flex flex-col gap-2">
      <span>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
        quos.
      </span>
    </div>
  </div>
</TkPopover>

Vue

<TkPopover position="top-start">
  <TkButton slot="trigger" label="Top Start" />
  <div slot="content" className="flex flex-col gap-2 w-[300px]">
    <div className="flex gap-2">
      <TkIcon icon="bolt" variant="neutral" sign />
      <span className="text-lg font-bold text-neutral-900">
        Popover Header
      </span>
    </div>
    <div className="flex flex-col gap-2">
      <span>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
        quos.
      </span>
    </div>
  </div>
</TkPopover>
<TkPopover position="top">
  <TkButton slot="trigger" label="Top" />
  <div slot="content" className="flex flex-col gap-2 w-[300px]">
    <div className="flex gap-2">
      <TkIcon icon="bolt" variant="neutral" sign />
      <span className="text-lg font-bold text-neutral-900">
        Popover Header
      </span>
    </div>
    <div className="flex flex-col gap-2">
      <span>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
        quos.
      </span>
    </div>
  </div>
</TkPopover>
<TkPopover position="top-end">
  <TkButton slot="trigger" label="Top End" />
  <div slot="content" className="flex flex-col gap-2 w-[300px]">
    <div className="flex gap-2">
      <TkIcon icon="bolt" variant="neutral" sign />
      <span className="text-lg font-bold text-neutral-900">
        Popover Header
      </span>
    </div>
    <div className="flex flex-col gap-2">
      <span>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
        quos.
      </span>
    </div>
  </div>
</TkPopover>
<TkPopover position="right-start">
  <TkButton slot="trigger" label="Right Start" />
  <div slot="content" className="flex flex-col gap-2 w-[300px]">
    <div className="flex gap-2">
      <TkIcon icon="bolt" variant="neutral" sign />
      <span className="text-lg font-bold text-neutral-900">
        Popover Header
      </span>
    </div>
    <div className="flex flex-col gap-2">
      <span>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
        quos.
      </span>
    </div>
  </div>
</TkPopover>
<TkPopover position="right">
  <TkButton slot="trigger" label="Right" />
  <div slot="content" className="flex flex-col gap-2 w-[300px]">
    <div className="flex gap-2">
      <TkIcon icon="bolt" variant="neutral" sign />
      <span className="text-lg font-bold text-neutral-900">
        Popover Header
      </span>
    </div>
    <div className="flex flex-col gap-2">
      <span>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
        quos.
      </span>
    </div>
  </div>
</TkPopover>
<TkPopover position="right-end">
  <TkButton slot="trigger" label="Right End" />
  <div slot="content" className="flex flex-col gap-2 w-[300px]">
    <div className="flex gap-2">
      <TkIcon icon="bolt" variant="neutral" sign />
      <span className="text-lg font-bold text-neutral-900">
        Popover Header
      </span>
    </div>
    <div className="flex flex-col gap-2">
      <span>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
        quos.
      </span>
    </div>
  </div>
</TkPopover>
<TkPopover position="left-start">
  <TkButton slot="trigger" label="Left Start" />
  <div slot="content" className="flex flex-col gap-2 w-[300px]">
    <div className="flex gap-2">
      <TkIcon icon="bolt" variant="neutral" sign />
      <span className="text-lg font-bold text-neutral-900">
        Popover Header
      </span>
    </div>
    <div className="flex flex-col gap-2">
      <span>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
        quos.
      </span>
    </div>
  </div>
</TkPopover>
<TkPopover position="left">
  <TkButton slot="trigger" label="Left" />
  <div slot="content" className="flex flex-col gap-2 w-[300px]">
    <div className="flex gap-2">
      <TkIcon icon="bolt" variant="neutral" sign />
      <span className="text-lg font-bold text-neutral-900">
        Popover Header
      </span>
    </div>
    <div className="flex flex-col gap-2">
      <span>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
        quos.
      </span>
    </div>
  </div>
</TkPopover>
<TkPopover position="left-end">
  <TkButton slot="trigger" label="Left End" />
  <div slot="content" className="flex flex-col gap-2 w-[300px]">
    <div className="flex gap-2">
      <TkIcon icon="bolt" variant="neutral" sign />
      <span className="text-lg font-bold text-neutral-900">
        Popover Header
      </span>
    </div>
    <div className="flex flex-col gap-2">
      <span>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
        quos.
      </span>
    </div>
  </div>
</TkPopover>
<TkPopover position="bottom-start">
  <TkButton slot="trigger" label="Bottom Start" />
  <div slot="content" className="flex flex-col gap-2 w-[300px]">
    <div className="flex gap-2">
      <TkIcon icon="bolt" variant="neutral" sign />
      <span className="text-lg font-bold text-neutral-900">
        Popover Header
      </span>
    </div>
    <div className="flex flex-col gap-2">
      <span>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
        quos.
      </span>
    </div>
  </div>
</TkPopover>
<TkPopover position="bottom">
  <TkButton slot="trigger" label="Bottom" />
  <div slot="content" className="flex flex-col gap-2 w-[300px]">
    <div className="flex gap-2">
      <TkIcon icon="bolt" variant="neutral" sign />
      <span className="text-lg font-bold text-neutral-900">
        Popover Header
      </span>
    </div>
    <div className="flex flex-col gap-2">
      <span>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
        quos.
      </span>
    </div>
  </div>
</TkPopover>
<TkPopover position="bottom-end">
  <TkButton slot="trigger" label="Bottom End" />
  <div slot="content" className="flex flex-col gap-2 w-[300px]">
    <div className="flex gap-2">
      <TkIcon icon="bolt" variant="neutral" sign />
      <span className="text-lg font-bold text-neutral-900">
        Popover Header
      </span>
    </div>
    <div className="flex flex-col gap-2">
      <span>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
        quos.
      </span>
    </div>
  </div>
</TkPopover>

Angular

Trigger

Allows two different actions click and hover with triggerproperty.

Popover Header

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.

Popover Header

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.

View Code

React

<TkPopover trigger="click">
  <TkButton slot="trigger" label="Click Me!"></TkButton>
  <div slot="content" className="flex flex-col gap-2 w-[300px]">
    <div className="flex gap-2">
      <TkIcon icon="bolt" variant="neutral" sign />
      <span className="text-lg font-bold text-neutral-900">
        Popover Header
      </span>
    </div>
    <div className="flex flex-col gap-2">
      <span>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
        quos.
      </span>
    </div>
  </div>
</TkPopover>
<TkPopover trigger="hover">
  <TkButton slot="trigger" label="Hover Me!"></TkButton>
  <div slot="content" className="flex flex-col gap-2 w-[300px]">
    <div className="flex gap-2">
      <TkIcon icon="bolt" variant="neutral" sign />
      <span className="text-lg font-bold text-neutral-900">
        Popover Header
      </span>
    </div>
    <div className="flex flex-col gap-2">
      <span>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
        quos.
      </span>
    </div>
  </div>
</TkPopover>

Vue

<TkPopover trigger="click">
  <TkButton slot="trigger" label="Click Me!"></TkButton>
  <div slot="content" className="flex flex-col gap-2 w-[300px]">
    <div className="flex gap-2">
      <TkIcon icon="bolt" variant="neutral" sign />
      <span className="text-lg font-bold text-neutral-900">
        Popover Header
      </span>
    </div>
    <div className="flex flex-col gap-2">
      <span>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
        quos.
      </span>
    </div>
  </div>
</TkPopover>
<TkPopover trigger="hover">
  <TkButton slot="trigger" label="Hover Me!"></TkButton>
  <div slot="content" className="flex flex-col gap-2 w-[300px]">
    <div className="flex gap-2">
      <TkIcon icon="bolt" variant="neutral" sign />
      <span className="text-lg font-bold text-neutral-900">
        Popover Header
      </span>
    </div>
    <div className="flex flex-col gap-2">
      <span>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
        quos.
      </span>
    </div>
  </div>
</TkPopover>

Angular

Close Method

This example demonstrates how to close a popover using a custom close button inside the popover content. The close button triggers the popover's close() method programmatically when clicked.

Popover Header

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.

View Code

React

import { TkPopover, TkButton, TkIcon } from '@takeoff-ui/react';
import React, { useRef } from 'react';

const PopoverCloseMethod = () => {
  const popoverRef = useRef<HTMLTkPopoverElement>(null);

  return (
    <div>
      <TkPopover ref={popoverRef} >
        <TkButton slot="trigger" label="Inner Close Button" />
        <div slot="content" className="flex flex-col gap-2 w-[300px]">
          <div className="flex justify-between items-center">
            <div className="flex gap-2">
              <TkIcon icon="bolt" variant="neutral" sign />
              <span className="text-lg font-bold text-neutral-900">
                Popover Header
              </span>
            </div>
            <TkButton
              icon="close"
              type="text"
              size="small"
              variant="neutral"
              onTkClick={() => popoverRef.current?.close()}
            />
          </div>
          <div className="flex flex-col gap-2">
            <span>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
              quos.
            </span>
          </div>
        </div>
      </TkPopover>
    </div>
  );
};

export default PopoverCloseMethod;

Vue

<template>
  <div>
    <TkPopover ref="popoverRef" >
      <TkButton slot="trigger" label="Inner Close Button" />
      <div slot="content" class="flex flex-col gap-2 w-[300px]">
        <div class="flex justify-between items-center">
          <div class="flex gap-2">
            <TkIcon icon="bolt" variant="neutral" sign />
            <span class="text-lg font-bold text-neutral-900">
              Popover Header
            </span>
          </div>
          <TkButton
            icon="close"
            type="text"
            size="small"
            variant="neutral"
            @tk-click="()=>  popoverRef.$el.close()"
          />
        </div>
        <div class="flex flex-col gap-2">
          <span>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
            quos.
          </span>
        </div>
      </div>
    </TkPopover>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { TkPopover, TkButton, TkIcon } from '@takeoff-ui/vue';

const popoverRef = ref(null);
</script>

Angular

API

Props

Name	Type	Default	Description
	any	null	The style attribute of container element
	"bottom", "bottom-end", "bottom-start", "left", "left-end", "left-start", "right", "right-end", "right-start", "top", "top-end", "top-start"	null	Sets the position of the popover.
	"click", "hover"	'click'	Sets the action of the popover.
	"basic", "dark", "white"	'basic'	Sets the type of the popover.

Methods

Name	Description
close	Closes the popover

Slots

Name	Description
	Default slot for content without a specific name
content	Define custom HTML content for the Popover, which replaces the default header, description and icon elements
trigger	The trigger slot defines the element that will trigger the Popover