Skip to content

[Bug] fix(reader): Tooltips in selection popup render behind the popup #402

Description

@GeraldCox

What went wrong?

In the epub reader selection popup, tooltips for the top-row buttons (Copy, Highlight, Search, etc.) display correctly above the menu. However, tooltips for the color picker and style buttons (Highlight, Underline, Strikethrough, Squiggly) render behind the popup and are not visible.

Steps to reproduce

  1. Open any book in the epub reader
  2. Select some text
  3. Tap the Highlight button to expand the color/style picker
  4. Hover over a color swatch or style button (H, U, S, ~)

Expected vs actual behavior

Expected behavior:
Tooltips appear above the popup, visible to the user.

Actual behavior:
Tooltips render behind the popup and are not visible.

Root cause:
The selection popup uses z-[60] (z-index: 60) in client/src/features/reader/epub/components/SelectionPopup.vue, but TooltipContent in client/src/components/ui/tooltip/TooltipContent.vue uses z-50 (z-index: 50). Since tooltips are portaled to via TooltipPortal, they stack below the popup.

Your setup

  • BookOrbit version/image tag: latest
  • Deployment: Docker / Unraid
  • OS: Unraid
  • Browser: Edge (latest)

Relevant logs (optional)

Screenshots (optional)

No response

Before submitting

  • I've searched existing issues and this hasn't been reported yet.

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't workingreleasedIssue or PR is included in a released version.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions