Skip to content

GitLab UI tooltips in HAML/Vanilla JS: Display tooltips

Enrique Alcántara requested to merge prototype-gitlab-ui-tooltips-from-haml into master

What does this MR do?

It creates an interoperability layer between vanilla JavaScript tooltips that currently use the Bootstrap tooltips API and GitLab UI tooltip component. In other words, it replaces Bootstrap tooltips with GitLab UI’s tooltips in the HAML/Vanilla JS environment.

This change has two purposes:

  • Achieve UX consistency by using a single tooltip component across the entire application.
  • Remove Bootstrap JavaScript APIs which will eventually lead towards the removal of jQuery altogether.

How do we do this?

This Merge Request creates a single Vue application that manages the creation and disposal of tooltips. It also creates a façade that offers a similar API to Bootstrap’s tooltips for initializing, hiding, and disposing tooltips.

How to test?

Replace the following snippet in app/assets/javascripts/main.js:

  // Initialize tooltips
  $body.tooltip({
    selector: '.has-tooltip, [data-toggle="tooltip"]',
    trigger: 'hover',
    boundary: 'viewport',
    delay,
  });

with

  initTooltips('.has-tooltip, [data-toggle="tooltip"]:not([data-original-title])', {
    triggers: 'hover',
    boundary: 'viewport',
  });

After doing this, tooltips should display correctly. When adding new content to a page by adding a note to an issue or merge request, if that content has tooltips, those tooltips should work as well.

Does this MR meet the acceptance criteria?

Conformity

Availability and Testing

Edited by Enrique Alcántara

Merge request reports