Popover

A Popover can be used to display some content on top of another.

install	version	usage
yarn add @ciceksepeti/cui-popover	0.0.12	import {Popover} from '@ciceksepeti/cui-popover'

Wai-AriaW3

RepositoryGitHub

PackageNPM

Content

The popover component provides the user to integrate an accessible pop-up window to the appropriate application. When the user clicks or tabs between buttons the popover applied button, pop up window appears. After that in regards of accessibility, the next element becomes pop-up's content respectively.

Examples

Example of a default behavior of Popover component. Renders as 'div' by default.

Default

import { useRef, useState } from 'react';
import Popover from '@ciceksepeti/cui-popover';

const Example = () => {
  const targetRef = useRef();
  const [isPopoverOpen, setIsPopoverOpen] = useState(false);

  return (
    <div>
      <p>
        Contrary to popular belief, Lorem Ipsum is not simply random text. It
        has roots in a piece of classical Latin literature from 45 BC, making it
        over 2000 years old. Richard McClintock, a Latin professor at
        Hampden-Sydney College in Virginia, looked up one of the more obscure
        Latin words, consectetur, from a Lorem Ipsum passage, and going through
        the cites of the word in classical literature, discovered the
        undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33
        of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by
        Cicero, written in 45 BC. This book is a treatise on the theory of
        ethics, very popular during the Renaissance. The first line of Lorem
        Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section
        1.10.32.
      </p>
      <p>
        Contrary to popular belief, Lorem Ipsum is not simply random text. It
        has roots in a piece of classical Latin literature from 45 BC, making it
        over 2000 years old. Richard McClintock, a Latin professor at
        Hampden-Sydney College in Virginia, looked up one of the more obscure
        Latin words, consectetur, from a Lorem Ipsum passage, and going through
        the cites of the word in classical literature, discovered the
        undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33
        of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by
        Cicero, written in 45 BC. This book is a treatise on the theory of
        ethics, very popular during the Renaissance. The first line of Lorem
        Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section
        1.10.32.
      </p>
      <p>
        Contrary to popular belief, Lorem Ipsum is not simply random text. It
        has roots in a piece of classical Latin literature from 45 BC, making it
        over 2000 years old. Richard McClintock, a Latin professor at
        Hampden-Sydney College in Virginia, looked up one of the more obscure
        Latin words, consectetur, from a Lorem Ipsum passage, and going through
        the cites of the word in classical literature, discovered the
        undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33
        of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by
        Cicero, written in 45 BC. This book is a treatise on the theory of
        ethics, very popular during the Renaissance. The first line of Lorem
        Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section
        1.10.32.
      </p>
      <div>
        <button>some button</button>
        <button>some button</button>
        <button>some button</button>
        <button>some button</button>
        <button
          ref={targetRef}
          onClick={() => setIsPopoverOpen(!isPopoverOpen)}
        >
          click me
        </button>
        <button>some button</button>
        <button>some button</button>
      </div>
      {isPopoverOpen && (
        <Popover
          as="div"
          targetRef={targetRef}
          style={{
            padding: '5px 10px',
            borderRadius: '4px',
            background: 'white',
            border: '1px solid #eee',
          }}
        >
          <p style={{ width: '250px' }}>
            Aliqua consectetur non ut id nostrud sit ipsum consequat officia
            adipisicing cillum aliquip ex. Ex est magna nostrud sit ad id minim
            nulla. Culpa sunt dolore minim consequat consequat veniam ut. Ex
            aliquip culpa aute sint consectetur ad. Quis nulla ad amet velit
            consectetur velit cupidatat. Lorem eiusmod nulla ut qui irure
            pariatur.
          </p>
          <button>inside</button>
          <button>inside</button>
        </Popover>
      )}
      <p>
        Contrary to popular belief, Lorem Ipsum is not simply random text. It
        has roots in a piece of classical Latin literature from 45 BC, making it
        over 2000 years old. Richard McClintock, a Latin professor at
        Hampden-Sydney College in Virginia, looked up one of the more obscure
        Latin words, consectetur, from a Lorem Ipsum passage, and going through
        the cites of the word in classical literature, discovered the
        undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33
        of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by
        Cicero, written in 45 BC. This book is a treatise on the theory of
        ethics, very popular during the Renaissance. The first line of Lorem
        Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section
        1.10.32.
      </p>
      <p>
        Contrary to popular belief, Lorem Ipsum is not simply random text. It
        has roots in a piece of classical Latin literature from 45 BC, making it
        over 2000 years old. Richard McClintock, a Latin professor at
        Hampden-Sydney College in Virginia, looked up one of the more obscure
        Latin words, consectetur, from a Lorem Ipsum passage, and going through
        the cites of the word in classical literature, discovered the
        undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33
        of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by
        Cicero, written in 45 BC. This book is a treatise on the theory of
        ethics, very popular during the Renaissance. The first line of Lorem
        Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section
        1.10.32.
      </p>
      <button>some button</button>
      <button>some button</button>
      <p>
        Contrary to popular belief, Lorem Ipsum is not simply random text. It
        has roots in a piece of classical Latin literature from 45 BC, making it
        over 2000 years old. Richard McClintock, a Latin professor at
        Hampden-Sydney College in Virginia, looked up one of the more obscure
        Latin words, consectetur, from a Lorem Ipsum passage, and going through
        the cites of the word in classical literature, discovered the
        undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33
        of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by
        Cicero, written in 45 BC. This book is a treatise on the theory of
        ethics, very popular during the Renaissance. The first line of Lorem
        Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section
        1.10.32.
      </p>
      <p>
        Contrary to popular belief, Lorem Ipsum is not simply random text. It
        has roots in a piece of classical Latin literature from 45 BC, making it
        over 2000 years old. Richard McClintock, a Latin professor at
        Hampden-Sydney College in Virginia, looked up one of the more obscure
        Latin words, consectetur, from a Lorem Ipsum passage, and going through
        the cites of the word in classical literature, discovered the
        undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33
        of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by
        Cicero, written in 45 BC. This book is a treatise on the theory of
        ethics, very popular during the Renaissance. The first line of Lorem
        Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section
        1.10.32.
      </p>
    </div>
  );
};

Popover Default

Click inside of this preview area
Press the tab button until you reach the 'click me' button or directly click to 'click me' button
Pop up window will appear then your accessible tab button will directly jump into pop up window
Hit the tab button on your keyboard so that you are going to be able to discover the magic
As you scroll up and down the page pop up window will locate itself to the appropriate area

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.

Props

Name	Type	Default	Required	Description
as	string	div	-	Changes HTML tag of popover component which renders to DOM
portal	boolean	true	-	Changes HTML renders the position of the popover component into DOM
autoFlip	boolean	true	-	Changes the visual position of the popover component on the page
placement	string	bottom	-	Allows a user to determine the visual position of the popover component on a page
targetRef	MutableRefObject	-	required	Provides the user to determine which element is going to bind to the popover component
children	React.Node	-	required	The element which is going to be rendered inside the pop-up component

Name	Type	Description
useRef	() => {}	useRef hook provides the user to create a connection between related HTMLElement and popover component

Playground

Styling

Element Selectors

Name	Type
[data-cui-popover]	Element Selector

Default Selector Values

Portal doesn't include default pop-up styling. You can override it however you like throught element selector.

[data-cui-popover] {
}

Or you can simply use template structure which is shown inside the preview section that is similar to the example shown above.

[data-cui-popover] {
  padding: 5px 10px;
  border-radius: 4px;
  background-color: #fff;
  border: 1px solid #eee;
}

Popover

Content

Examples

Default

How does popover work?

Props

Popover Props

Popover Props

Popover Events

Popover Events

Playground

Styling

Element Selectors

Element Selectors

Default Selector Values

Default Selector Values

Popover

Content​

Examples​

Default​

How does popover work?​

Props​

Popover Props​

Popover Props

Popover Props

Popover Events​

Popover Events

Popover Events

Playground​

Styling​

Element Selectors​

Element Selectors

Element Selectors

Default Selector Values​

Default Selector Values

Default Selector Values

Content

Examples

Default

How does popover work?

Props

Popover Props

Popover Events

Playground

Styling

Element Selectors

Default Selector Values