WIP: Tooltip styles
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:
- 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 thecustom-class
prop:
<gl-tooltip :target="() => $refs.createdAtDateTime" custom-class="gl-tooltip">
- 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
Edited by David O'Regan