Fix Model Selection tooltips not rendering in Vue 3

What does this MR do and why?

  • Fix the "Apply to all" tooltip not rendering in Vue 3 on the instance-level and namespace-level Model Selection pages.
  • Fix the warning tooltip not rendering in Vue 3 when no model is selected for a feature in the instance-level Model Selection page (offline mode)

Root cause: batch_update_button.vue and batch_settings_updater.vue used the GlTooltip component with :target="() => $refs.someRef". In Vue 3, $refs are not populated during the initial render when the tooltip component evaluates its target function, so the tooltip received a null target and rendered an empty container. Since there is a company wide effort to migrate to Vue 3 right now, this is important to fix.

Fix: Replace the GlTooltip component with the v-gl-tooltip directive, which is the Vue 3-compatible approach already used by sibling components in the same directory (available_models_row.vue, model_select_dropdown.vue, etc.).

Closes #624686 (closed)

References

Screenshots or screen recordings

SaaS (Vue3)

Before After
Screenshot_2026-09-08_at_1.14.02_pm Screenshot_2026-09-08_at_1.03.13_pm

Self-managed online (Vue3)

Before After
Screenshot_2026-09-08_at_1.09.08_pm Screenshot_2026-09-08_at_1.06.21_pm

Self-managed offline (Vue3)

Before After
Screenshot_2026-09-08_at_1.38.58_pm Screenshot_2026-09-08_at_1.40.41_pm

How to set up and validate locally

  • Switch GDK to Vue 3:
    gdk config set vite.vue_version 3
    gdk reconfigure
    gdk restart

Validating instance-level model selection

  1. Go to /admin/gitlab_duo/model_selection/features.
  2. Hover over the Apply to all button — tooltip should now render with helper text.
  3. Hover over the warning icon when no model is assigned (for offline mode only) — tooltip should now render with helper text.

Validating namespace-level model selection

  1. Go to /groups/gitlab-duo/-/settings/gitlab_duo/model_selection (where gitlab-duo is the group ID)
  2. Hover over the Apply to all button — tooltip should now render with helper text.

Validating no regressions in Vue2

  • Repeat steps above with GDK in Vue 2

MR acceptance checklist

Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Edited by Julie Huang

Merge request reports

Loading
Loading