Tooltips Hidden by Formatting Toolbar

[jolanglinais]

Bug Report 🐛

Tooltips for conditional variables and clause template action icons (test, edit, delete) are hidden behind the formatting toolbar

Expected Behavior

Tooltips should be above everything else

Current Behavior

Possible Solution

Raise the z-index of these components

Steps to Reproduce

1. View the demo
2. Place cursor after the clause template, create new lines until sufficient scrolling
3. Scroll to make the action icons just below the formatting toolbar
4. Hover and see them hidden under the toolbar

Context (Environment)

Desktop

• OS: macOS
• Browser: Chrome
• Version: 0.91.0

[jolanglinais]

Also seen in this reproduction is the formatting toolbar width issue?

[arteevraina]

@irmerk Can I take a look at this?

[shubhamkakkar]

@irmerk I am planning to look into this.

1. the demo link you addded in the description doesnt works
2. can you guide me to the exact component, I am new to the projec so dont have much idea;

[jolanglinais]

Sorry about that @shubhamkakkar I updated the demo link - it was before we moved back to Netlify. Yes so these tooltips are located here in the Clause component, that should be your starting point.

[dselman]

@DianaLease is this now fixed with the z-index changes?

[jolanglinais]

I believe the changes we mentioned during the Working Group call were in relation to the buttons on a clause, not the formatting toolbar.

[DianaLease]

@dselman @irmerk It's still an issue, but not as bad as the screenshot in the original post as we have changed the toolbar since then. Here's an updated screenshot:

[Udbhavbisarya23]

@DianaLease @irmerk @dselman If this is still an issue, can i be assigned to this?

[Udbhavbisarya23]

The z-index of the tooltip is 99 and that of the toolbar is 10.
I believe this issue can be fixed by removing the z-index of the formatting toolbar or by adding a position and z-index property to the text editor.

[jolanglinais]

Hmm, unsure why the toolbar would need an index, I don't think it will need to be on top of anything else.