# Feature DREAM-211 - Use Primer Popover for our Popovers

Project: Stream Design System
Status: rejected
URL: https://community.openproject.org/work_packages/DREAM-211

## Planning

| Attribute | Value |
| --- | --- |
| Date |  |
| Priority | Medium |
| Target versions | Product Backlog |
| Sprint |  |
| Backlog bucket |  |
| Votes |  |
| List |  |
| Roadmap |  |
| Relevance |  |

## OPEN POINTS / FEEDBACK

_No work packages_

## Features and Chunks

_No work packages_

## Bugs and other work packages

_No work packages_

## Technical Details

| Attribute | Value |
| --- | --- |
| Module |  |
| Feature Flag |  |
| Requires doc change | Yes |
| Enterprise plan |  |

## Details

| Attribute | Value |
| --- | --- |
| Pull preview |  |
| Mockups |  |
| Accessibility | No |

## People

| Attribute | Value |
| --- | --- |
| Assignee |  |
| Accountable |  |
| Product manager |  |
| Developers |  |
| Designer |  |
| Ordered by |  |
| Signed off by |  |
| Interest by |  |

## Estimates and progress

| Attribute | Value |
| --- | --- |
| PD (min) |  |
| PD (max) |  |
| Work |  |
| Labor costs |  |

## Description

With <mention class="mention" data-id="61126" data-type="work_package" data-text="#61126">\#61126</mention>, we now have info popovers on work package references as well as user avatars and names.

It is now technically possible to use `Primer::Beta::Popover` instead of placing everything into a simple `div` element.

**Acceptance criteria**

  - Apply the [Primer Popover](https://primer.style/view-components/lookbook/inspect/primer/beta/popover/playground/?caret=bottom) to our popovers
    
      - Work package popover
    
      - User popover
    
      - With this, popovers should look [like this](https://www.figma.com/design/HLWvSPFY6DQyIrUvnqHF9Q/Invite-users---Autocompleters?node-id=8-17626)

  - Investigate if the `caret` can be shown pointing to the hover target of the popover. If so, implement it.

**Technical notes**

  - At the time of writing, there are two views where the Primer component must be used:
    
      - `app/components/users/hover_card_component.html.erb`
    
      - `app/components/work_packages/hover_card_component.html.erb`

  - To implement the `caret` pointing into the correct direction: it should be possible to calculate the relative position from the target and popover once the popover [position has been determined](https://github.com/opf/openproject/blob/2438488920ca7fb83644d75cea29d2a59f0eb445/frontend/src/stimulus/controllers/hover-card-trigger.controller.ts#L236) and decide where the caret should be shown. This information must then be transferred to the popover somehow.