feat(tooltip): PFE1:1

[brianferry]

What I Did

• Remove all scss specific styling and implement the css styling from patternfly.org
• Implement many of the --pf-c- variables from patternfly.

Choices

• Did not implement the full API from patternfly tooltip and instead used a slim version that will be compatible with rhds tooltip
• Did not style the invoker directly and instead left that up to the lightdom as it will not always be the case that the invoker is an icon or button element.

Note To Reviewers

• Please take a look at the stylings related to dark theme and make sure that aligns with the expectations for rhds. Going from the docs it does but when content is partially dark theme and partially light theme it isn't as clear.

[changeset-bot]

🦋 Changeset detected

Latest commit: 5d18f1a

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@patternfly/pfe-tooltip	Minor
@patternfly/pfe-core	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[bennypowers]

@brianferry do make sure to squash when merging, please

[marionnegp]

@brianferry, the changes look good! I added a comment about the background color.

Can the tooltip be shifted so that the arrow is centered on the invoker for the following tooltip positions?

• Left-Start Tooltip
• Left-End Tooltip
• Right-Start Tooltip
• Right-End Tooltip
• Top-Start Tooltip
• Bottom-Start Tooltip

The top-end and bottom-end positioning look correct.

[bennypowers]

@brianferry, the changes look good! I added a comment about the background color.

Can the tooltip be shifted so that the arrow is centered on the invoker for the following tooltip positions?

* [ ]  Left-Start Tooltip

* [ ]  Left-End Tooltip

* [ ]  Right-Start Tooltip

* [ ]  Right-End Tooltip

* [ ]  Top-Start Tooltip

* [ ]  Bottom-Start Tooltip

The top-end and bottom-end positioning look correct.

the start and end positions there indicate where along the desired edge the arrow should appear, so these are correct afaict

[marionnegp]

@bennypowers, I thought so too, but they look centered for the top-end and bottom-end tooltips. Is there a way to get the other tooltips to be positioned similarly?

I'm not able to see these variations in relation to the invoker on patternfly.org though, so if it already matches what's on PF, it's fine.

[brianferry]

@bennypowers, I thought so too, but they look centered for the top-end and bottom-end tooltips. Is there a way to get the other tooltips to be positioned similarly?

I'm not able to see these variations in relation to the invoker on patternfly.org though, so if it already matches what's on PF, it's fine.

I think this might be a case of where our demos don't show a button like patternfly.org so it looks different because of the size of the element. I set up an element locally and top-start / top-end looks like this

Which seems to lineup with how patternfly does it

[bennypowers]

@brianferry wdyt about updating those examples in the demo, for clarity? and thanks @marionnegp for clarifying the issue

[brianferry]

@brianferry wdyt about updating those examples in the demo, for clarity? and thanks @marionnegp for clarifying the issue

I think that's a good idea, just pushed an update which should add the buttons to the demos instead of the icons for clarity. @marionnegp - tagging for visibility.

[bennypowers]

Well done, @brianferry and reviewers!