Refined-github: Markdown rich diff tooltip appears underneath diff settings bar

Created on 3 May 2018  Â·  10Comments  Â·  Source: sindresorhus/refined-github

image

Steps to repro:

  1. Open a diff with markdown changes (e.g. https://github.com/dcwither/react-editable-decorator/pull/4/files?utf8=%E2%9C%93&diff=unified&w=1&short_path=04c6e90#diff-04c6e90faac2675aa89e2176d2eec7d8)
  2. Scroll down until the button is sticking to the top of the screen
  3. Hover over the button

Expected Behavior:

The tooltip either appears below the button or on top of the toolbar

Actual Behavior:

The tooltip appears underneath the PR toolbar.

System Info:
OS X 10.13.4
Chrome Version 65.0.3325.181 (Official Build) (64-bit)

bug good first issue help wanted

Most helpful comment

It's far enough that it doesn't really happen.

Not on every OS!

cursor


And it's too annoying to have anything popup below your cursor anyway (takes time to interpret what is happening).

All 10 comments

This is an known issue from #689, because of the sticky behavior of header items of each file and the main diff header.

The solutions were to just hide tooltips (#799, merged), or use JS to change tooltip direction (https://github.com/sindresorhus/refined-github/issues/689#issuecomment-336694139).

Maybe we should change tooltip direction for icon-only buttons!? @bfred-it?

Duplicate of #1212

This was fixed by #1234 but something might have changed. PR welcome to hide it again.

@bfred-it This is not a duplicate, #1234 only tried to remove tooltips on "Open file in GitHub desktop" and "Edit file" buttons, which still works. This issue is for tooltips on Markdown diff buttons (sample diff).

These buttons have the following aria-labels, and either the tooltips need to be hidden (not preferred) or their direction needs to be changed (needs JS).

[aria-label="Display the source diff"]
[aria-label="Display the rich diff"]

You’re right. These icons aren’t not completely clear though, so… maybe we have to move their tooltip downwards via js, perhaps as part of a new “sticky file header.js” feature since it wouldn’t stand on its own.

Otherwise, probably preferrable, would be to override their tooltip position via CSS. It’d be a little ugly but it’d be lighter than using JS and watching all the ajax events.

Overriding position with CSS would be a better idea than JS. Also "Left/Right" would be a better position than "Down", as most of the time your cursor would be hiding the tooltip.

most of the time your cursor would be hiding the tooltip

It's far enough that it doesn't really happen. Even hovering the last pixel only covers a couple pixels of the text:

a

It's far enough that it doesn't really happen.

Not on every OS!

cursor


And it's too annoying to have anything popup below your cursor anyway (takes time to interpret what is happening).

Hi there! I’m a first-time contributor and was hoping to help out with this issue. I noticed nobody was assigned to it, but if there’s already a solution in progress I’m happy to try helping out elsewhere. Thanks!

@dcwither Go for it!

Thanks! PR #1308 addresses this issue.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

olso picture olso  Â·  3Comments

durka picture durka  Â·  3Comments

MilesBHuff picture MilesBHuff  Â·  3Comments

pawelad picture pawelad  Â·  3Comments

Arcanemagus picture Arcanemagus  Â·  3Comments