[GH-ISSUE #21088] Model description tooltip clips at top of screen #139103

New Issue

GiteaMirror · 2026-05-25T12:22:40-05:00

GiteaMirror commented

2026-05-25 12:22:40 -05:00

Originally created by @thekirkulees on GitHub (Feb 1, 2026).
Original GitHub issue: https://github.com/open-webui/open-webui/issues/21088

Description

When hovering over the info icon to view a model's description in the model selector, the tooltip appears above the element (placement="top") and gets clipped at the top of the viewport when the model is near the top of the dropdown list.

Expected Behavior

The tooltip should auto-position to remain fully visible within the viewport - either by:

Defaulting to placement="bottom" for model descriptions, or
Enabling Tippy.js's flip modifier to auto-detect available space

Current Behavior

The tooltip always renders above the icon regardless of available viewport space, causing long descriptions to be cut off at the top of the screen.

Location

src/lib/components/chat/ModelSelector/ModelItem.svelte

Current code:

<Tooltip
    content={`${marked.parse(
        sanitizeResponseContent(item.model?.info?.meta?.description)
            .replaceAll('\n', '<br>')
    )}`}
>

Suggested Fix

Add placement or tippyOptions to enable viewport-aware positioning:

<Tooltip
    content={...}
    placement="bottom"
>

Or for auto-positioning:

<Tooltip
    content={...}
    tippyOptions={{ flip: true }}
>

Environment

Open WebUI version: latest (pip/conda install)
Browser: Safari/Chrome on macOS

Originally created by @thekirkulees on GitHub (Feb 1, 2026). Original GitHub issue: https://github.com/open-webui/open-webui/issues/21088 ## Description When hovering over the info icon to view a model's description in the model selector, the tooltip appears above the element (placement="top") and gets clipped at the top of the viewport when the model is near the top of the dropdown list. ## Expected Behavior The tooltip should auto-position to remain fully visible within the viewport - either by: 1. Defaulting to `placement="bottom"` for model descriptions, or 2. Enabling Tippy.js's flip modifier to auto-detect available space ## Current Behavior The tooltip always renders above the icon regardless of available viewport space, causing long descriptions to be cut off at the top of the screen. ## Location `src/lib/components/chat/ModelSelector/ModelItem.svelte` Current code: ```svelte <Tooltip content={`${marked.parse( sanitizeResponseContent(item.model?.info?.meta?.description) .replaceAll('\n', '<br>') )}`} > ``` ## Suggested Fix Add placement or tippyOptions to enable viewport-aware positioning: ```svelte <Tooltip content={...} placement="bottom" > ``` Or for auto-positioning: ```svelte <Tooltip content={...} tippyOptions={{ flip: true }} > ``` ## Environment - Open WebUI version: latest (pip/conda install) - Browser: Safari/Chrome on macOS

GiteaMirror closed this issue

2026-05-25 12:22:40 -05:00

GiteaMirror commented

2026-05-25 12:22:43 -05:00

@silentoplayz commented on GitHub (Feb 4, 2026):

Can you provide screenshots?

@silentoplayz commented on GitHub (Feb 4, 2026): Can you provide screenshots?

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github-starred/open-webui#139103