Skip to content

WIP: Tooltip styles

David O'Regan requested to merge tooltip-styles into master

A tiny MVC to get the ball rolling for #22 (closed), this merge isn't meant to be a valid solution, rather a WIP to get a conversation going.

Why

On the status page, when we import the gl-tooltip, the needed class/styles are not applied.

The Issue

There are two separate issues at play here:

  1. The actual class .gl-tooltip is never applied to the tooltip element, and from looking at the @gitlab/ui libary, this seems to be intentional as it's not part of the base component but perhaps this is a bug that needs to be fixed? For the moment we can solve this issue by using the custom-class prop:
<gl-tooltip :target="() => $refs.createdAtDateTime" custom-class="gl-tooltip">
  1. When we get our gl-tooltip class applied, our styles are overridden regardless and this is because of how we import our SCSS files.
@import 'gitlab_ui';
@import 'bootstrap';
@import 'bootstrap-vue';
@import 'common';

When we import like this, the @gitlab/ui styles don't get applied to our tooltip due to them being overridden via the default bootstrap and then bootstrap-vue styles.

One possible fix is to handle the import of the tooltip styles separately, but this seems like a less than optimal solution:

@import 'gitlab_ui';
@import 'bootstrap';
@import 'bootstrap-vue';
@import '@gitlab/ui/src/components/base/tooltip/tooltip';
@import 'common';

The more I look at this issue, the more I am beginning to suspect a fix will be needed inside the @gitlab/ui library but I could use some feedback?

Screenshots

Screenshot_2020-03-27_at_11.01.23

@ealcantara @ohoral @ClemMakesApps

Edited by David O'Regan

Merge request reports