> For the complete documentation index, see [llms.txt](https://docs.quantumbyte.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.quantumbyte.ai/home/quantumbyte-v2.0/3.microsites-1/8.ui/4.components/27.popover.md).

# Popover

### Popover Props <a href="#popover-props" id="popover-props"></a>

| Name              | Type                         | Default                                             | Description                                                                                                                       |
| ----------------- | ---------------------------- | --------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- |
| angle             | boolean                      | true                                                | Renders popover "angle"/"corner"                                                                                                  |
| angleClass        | string                       | undefined                                           | Additional css class to add on "angle"/"corner" element                                                                           |
| backdrop          | boolean                      | true                                                | Enables Popover backdrop (dark semi transparent layer behind)                                                                     |
| colors            | object                       |                                                     | Object with Tailwind CSS colors classes                                                                                           |
| colors.bgIos      | string                       | 'bg-ios-light-surface-3 dark:bg-ios-dark-surface-3' |                                                                                                                                   |
| colors.bgMaterial | string                       | 'bg-md-light-surface-3 dark:bg-md-dark-surface-3'   |                                                                                                                                   |
| component         | string                       | 'div'                                               | Component's HTML Element                                                                                                          |
| opened            | boolean                      | false                                               | Allows to open/close Popover and set its initial state                                                                            |
| size              | string                       | 'w-64'                                              | Tailwind CSS size classes                                                                                                         |
| target            | string \| HTMLElement \| Ref |                                                     | Popover target element. Popover will be positioned around this element                                                            |
| targetHeight      | number                       |                                                     | Virtual target element height (in px). Required without using real target element (`target` prop)                                 |
| targetWidth       | number                       |                                                     | Virtual target element width (in px). Required without using real target element (`target` prop)                                  |
| targetX           | number                       |                                                     | Virtual target element horizontal offset from left side of the screen. Required without using real target element (`target` prop) |
| targetY           | number                       |                                                     | Virtual target element vertical offset from top of the screen. Required without using real target element (`target` prop)         |
| translucent       | boolean                      | true                                                | Makes Popover background translucent (with `backdrop-filter: blur`) in iOS theme                                                  |

### Popover Events

| Name          | Type        | Description                       |
| ------------- | ----------- | --------------------------------- |
| backdropclick | function(e) | Click handler on backdrop element |

### Examples

{% tabs %}
{% tab title="Vue" %}

```typescript
<template>
  <i-page>
    <i-navbar title="Popover">
      
      <template #right>
        <i-link
          class="popover-navbar-link"
          navbar
          @click="() => openPopover('.popover-navbar-link')"
        >
          Popover
        </i-link>
      </template>
    </i-navbar>
    <i-block class="space-y-4">
      <p>
        <i-button
          class="popover-button"
          @click="() => openPopover('.popover-button')"
        >
          Open popover on me
        </i-button>
      </p>
      <p>
        Mauris fermentum neque et luctus venenatis. Vivamus a sem rhoncus,
        ornare tellus eu, euismod mauris. In porta turpis at semper convallis.
        Duis adipiscing leo eu nulla lacinia, quis rhoncus metus condimentum.
        Etiam nec malesuada nibh. Maecenas quis lacinia nisl, vel posuere dolor.
        Vestibulum condimentum, nisl ac vulputate egestas, neque enim dignissim
        elit, rhoncus volutpat magna enim a est. Aenean sit amet ligula neque.
        Cras suscipit rutrum enim. Nam a odio facilisis, elementum tellus non,{{
          ' '
        }}
        <i-link
          class="popover-link-1"
          @click="() => openPopover('.popover-link-1')"
        >
          popover </i-link
        >{{ ' ' }}
        tortor. Pellentesque felis eros, dictum vitae lacinia quis, lobortis
        vitae ipsum. Cras vehicula bibendum lorem quis imperdiet.
      </p>
      <p>
        In hac habitasse platea dictumst. Etiam varius, ante vel ornare
        facilisis, velit massa rutrum dolor, ac porta magna magna lacinia nunc.
        Curabitur{{ ' ' }}
        <i-link
          class="popover-link-2"
          @click="() => openPopover('.popover-link-2')"
        >
          popover! </i-link
        >{{ ' ' }}
        cursus laoreet. Aenean vel tempus augue. Pellentesque in imperdiet nibh.
        Mauris rhoncus nulla id sem suscipit volutpat. Pellentesque ac arcu in
        nisi viverra pulvinar. Nullam nulla orci, bibendum sed ligula non,
        ullamcorper iaculis mi. In hac habitasse platea dictumst. Praesent
        varius at nisl eu luctus. Cras aliquet porta est. Quisque elementum quis
        dui et consectetur. Cum sociis natoque penatibus et magnis dis
        parturient montes, nascetur ridiculus mus. Sed sed laoreet purus.
        Pellentesque eget ante ante.
      </p>
      <p>
        Duis et ultricies nibh. Sed facilisis turpis urna, ac imperdiet erat
        venenatis eu. Proin sit amet faucibus tortor, et varius sem. Etiam vitae
        lacinia neque. Aliquam nisi purus, interdum in arcu sed, ultrices rutrum
        arcu. Nulla mi turpis, consectetur vel enim quis, facilisis viverra dui.
        Aliquam quis convallis tortor, quis semper ligula. Morbi ullamcorper{{
          ' '
        }}
        <i-link
          class="popover-link-3"
          @click="() => openPopover('.popover-link-3')"
        >
          one more popover </i-link
        >{{ ' ' }}
        massa at accumsan. Etiam purus odio, posuere in ligula vitae, viverra
        ultricies justo. Vestibulum nec interdum nisi. Aenean ac consectetur
        velit, non malesuada magna. Sed pharetra vehicula augue, vel venenatis
        lectus gravida eget. Curabitur lacus tellus, venenatis eu arcu in,
        interdum auctor nunc. Nunc non metus neque. Suspendisse viverra lectus
        sed risus aliquet, vel accumsan dolor feugiat.
      </p>
    </i-block>

    <i-popover
      :opened="popoverOpened"
      :target="popoverTargetRef"
      @backdropclick="() => (popoverOpened = false)"
    >
      <i-list nested>
        <i-list-item
          title="Item 1"
          link
          @click="() => (popoverOpened = false)"
        />
        <i-list-item
          title="List Item 2"
          link
          @click="() => (popoverOpened = false)"
        />
        <i-list-item
          title="Item 3"
          link
          @click="() => (popoverOpened = false)"
        />
        <i-list-item
          title="List Item 4"
          link
          @click="() => (popoverOpened = false)"
        />
        <i-list-item
          title="Item 5"
          link
          @click="() => (popoverOpened = false)"
        />
      </i-list>
    </i-popover>
  </i-page>
</template>
<script>
  import { ref } from 'vue';

  import {
    iPage,
    iNavbar,
    iNavbarBackLink,
    iPopover,
    iBlock,
    iLink,
    iButton,
    iList,
    iListItem,
  } from 'ina-ui/vue';

  export default {
    components: {
      iPage,
      iNavbar,
      iNavbarBackLink,
      iPopover,
      iBlock,
      iLink,
      iButton,
      iList,
      iListItem,
    },
    setup() {
      const popoverOpened = ref(false);
      const popoverTargetRef = ref(null);

      const openPopover = (targetRef) => {
        popoverTargetRef.value = targetRef;
        popoverOpened.value = true;
      };

      return {
        popoverOpened,
        popoverTargetRef,
        openPopover,
      };
    },
  };
</script>
```

{% endtab %}

{% tab title="React" %}

```js
import React, { useRef, useState } from 'react';
import {
  Page,
  Navbar,
  NavbarBackLink,
  Popover,
  Block,
  Link,
  Button,
  List,
  ListItem,
} from 'ina-ui/react';

export default function PopoverPage() {
  const [popoverOpened, setPopoverOpened] = useState(false);
  const popoverTargetRef = useRef(null);

  const openPopover = (targetRef) => {
    popoverTargetRef.current = targetRef;
    setPopoverOpened(true);
  };

  return (
    <Page>
      <Navbar
        title="Popover"
        right={
          <Link
            className="popover-navbar-link"
            navbar
            onClick={() => openPopover('.popover-navbar-link')}
          >
            Popover
          </Link>
        }
      />
      <Block className="space-y-4">
        <p>
          <Button
            className="popover-button"
            onClick={() => openPopover('.popover-button')}
          >
            Open popover on me
          </Button>
        </p>
        <p>
          Mauris fermentum neque et luctus venenatis. Vivamus a sem rhoncus,
          ornare tellus eu, euismod mauris. In porta turpis at semper convallis.
          Duis adipiscing leo eu nulla lacinia, quis rhoncus metus condimentum.
          Etiam nec malesuada nibh. Maecenas quis lacinia nisl, vel posuere
          dolor. Vestibulum condimentum, nisl ac vulputate egestas, neque enim
          dignissim elit, rhoncus volutpat magna enim a est. Aenean sit amet
          ligula neque. Cras suscipit rutrum enim. Nam a odio facilisis,
          elementum tellus non,{' '}
          <Link
            className="popover-link-1"
            onClick={() => openPopover('.popover-link-1')}
          >
            popover
          </Link>{' '}
          tortor. Pellentesque felis eros, dictum vitae lacinia quis, lobortis
          vitae ipsum. Cras vehicula bibendum lorem quis imperdiet.
        </p>
        <p>
          In hac habitasse platea dictumst. Etiam varius, ante vel ornare
          facilisis, velit massa rutrum dolor, ac porta magna magna lacinia
          nunc. Curabitur{' '}
          <Link
            className="popover-link-2"
            onClick={() => openPopover('.popover-link-2')}
          >
            popover!
          </Link>{' '}
          cursus laoreet. Aenean vel tempus augue. Pellentesque in imperdiet
          nibh. Mauris rhoncus nulla id sem suscipit volutpat. Pellentesque ac
          arcu in nisi viverra pulvinar. Nullam nulla orci, bibendum sed ligula
          non, ullamcorper iaculis mi. In hac habitasse platea dictumst.
          Praesent varius at nisl eu luctus. Cras aliquet porta est. Quisque
          elementum quis dui et consectetur. Cum sociis natoque penatibus et
          magnis dis parturient montes, nascetur ridiculus mus. Sed sed laoreet
          purus. Pellentesque eget ante ante.
        </p>
        <p>
          Duis et ultricies nibh. Sed facilisis turpis urna, ac imperdiet erat
          venenatis eu. Proin sit amet faucibus tortor, et varius sem. Etiam
          vitae lacinia neque. Aliquam nisi purus, interdum in arcu sed,
          ultrices rutrum arcu. Nulla mi turpis, consectetur vel enim quis,
          facilisis viverra dui. Aliquam quis convallis tortor, quis semper
          ligula. Morbi ullamcorper{' '}
          <Link
            className="popover-link-3"
            onClick={() => openPopover('.popover-link-3')}
          >
            one more popover
          </Link>{' '}
          massa at accumsan. Etiam purus odio, posuere in ligula vitae, viverra
          ultricies justo. Vestibulum nec interdum nisi. Aenean ac consectetur
          velit, non malesuada magna. Sed pharetra vehicula augue, vel venenatis
          lectus gravida eget. Curabitur lacus tellus, venenatis eu arcu in,
          interdum auctor nunc. Nunc non metus neque. Suspendisse viverra lectus
          sed risus aliquet, vel accumsan dolor feugiat.
        </p>
      </Block>

      <Popover
        opened={popoverOpened}
        target={popoverTargetRef.current}
        onBackdropClick={() => setPopoverOpened(false)}
      >
        <List nested>
          <ListItem
            title="Item 1"
            link
            onClick={() => setPopoverOpened(false)}
          />
          <ListItem
            title="List Item 2"
            link
            onClick={() => setPopoverOpened(false)}
          />
          <ListItem
            title="Item 3"
            link
            onClick={() => setPopoverOpened(false)}
          />
          <ListItem
            title="List Item 4"
            link
            onClick={() => setPopoverOpened(false)}
          />
          <ListItem
            title="Item 5"
            link
            onClick={() => setPopoverOpened(false)}
          />
        </List>
      </Popover>
    </Page>
  );
}
```

{% endtab %}
{% endtabs %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.quantumbyte.ai/home/quantumbyte-v2.0/3.microsites-1/8.ui/4.components/27.popover.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.