TACKLE-671: Application form - Packaging Popover

[gildub]

https://issues.redhat.com/browse/TACKLE-671

[ibolton336]

Can we add a question mark icon next to the field label and add the tooltip or popover to that? This UX seems odd in that the tooltip is floating to the left of the input box outside of the form and that there is no indication that there is a tooltip present until hovering over the field.

[gildub]

@ibolton336, the related issue (TACKLE-671) clearly lacks requirements.
To avoid going back and forth we need to make sure requirements are validated by UXD team.
The tooltip position is now centered above by default.
I don't think a question mark makes sense here but again let's get UXD to determine that. The latter can be added in a separate PR.

[ibolton336]

@ibolton336, the related issue (TACKLE-671) clearly lacks requirements. To avoid going back and forth we need to make sure requirements are validated by UXD team. The tooltip position is now centered above by default. I don't think a question mark makes sense here but again let's get UXD to determine that. The latter can be added in a separate PR.

No problem. Lets wait for the UXD input before moving forward just so we have something to go off of for future tooltips.

[gildub]

@ibolton336, thank you for the follow-up with UXD, I have replaced tooltip with popover.

[ibolton336]

Something isn't looking quite right here with the spacing and icon size.

Also, I think I remember the popover on MTC having a black background? I could be wrong there but seems like the popover is hard to read against the form background. I wonder why the tooltip has a black background and the popover does not.

[gildub]

@ibolton336, please re-review with dark popover in place.

[ibolton336]

@ibolton336, please re-review with dark popover in place.

I think the form spacing may be the culprit here, but the label seems cramped underneath the above input box. Also, the icon size still doesn't seem to be scaled correctly. Would love to nail this so we can reuse across the app. Maybe even create a label with popover icon local component if that makes sense?

[gildub]

@ibolton336, I updated it wrapping Icon with span and css properties and also replaced Icon with QuestionCircleIcon

[gildub]

@ibolton336, I don't know why we have to go all the way to define CSS at top level as we didn't need such approach with tackle. Anyway it looks much better. Thanks

[ibolton336]

@ibolton336, I don't know why we have to go all the way to define CSS at top level as we didn't need such approach with tackle. Anyway it looks much better. Thanks

Global CSS is useful if we have modifier classes that are available across widely used components. That way we don't have to import the css again in each file. Is there another approach you had in mind?

[gildub]

@ibolton336, I understand the global vs local approach, but that's the thing, in forklift, I don't think we're changing anything locally but as you mentioned we might be using a different PF version.