Skip to content

Fixes tooltips in mini pipeline graph

Filipa Lacerda requested to merge 27963-tooltips-jobs into master

What does this MR do?

Fixes 2 different problems:

1. First one - with big pipelines with a lot of stages, when the user hovered the last one, it break the line. This was fixed sometime ago already, we must have changed the CSS again, we need to keep an eye on it ;)

2. Second one - Tooltips! We where applying a bootstrap "hack" in the wrong place. Bootstrap documentation says:

Multiple-line links Sometimes you want to add a tooltip to a hyperlink that wraps multiple lines. The default behavior of the tooltip plugin is to center it horizontally and vertically. Add white-space: nowrap; to your anchors to avoid this.

We were doing this in .tooltip instead of doing this in the a element.

Problem of doing this in the right element: it won't work for buttons. 😢 Even when we do button, a {white-space: nowrap;}.

We could transform the stage dropdowns into <a> instead of buttons, but that will result in:

button a
Screen_Shot_2017-02-10_at_15.39.26 Screen_Shot_2017-02-10_at_15.40.12

(Not sure if it's because it's a dropdown..)

The solution of this MR, sets a min-width in the button's tooltips resulting in:

Screenshots (if relevant)

Before After
Screen_Shot_2017-02-10_at_15.31.47 Screen_Shot_2017-02-10_at_15.43.28
Screen_Shot_2017-02-10_at_15.42.17 Screen_Shot_2017-02-10_at_15.43.07
before tooltip_after

Does this MR meet the acceptance criteria?

What are the relevant issue numbers?

Closes #27963 (closed) Closes #28008 (closed)

Merge request reports