Problem description:
The custom status message of the user does not get hidden by the banner even when the post that the user saw is gone, hence making it not visually appealing.
Expected behavior:
Status message is hidden by the banner
Actual behavior:
Status shows in front of the banner.
Steps to reproduce:
Click on a user’s custom status, and scroll up, until the post is gone from sight. Then, you will still be able to see the status mssage in front of the banner at the top of the page.
Bug appears at this link:
(I am not sure if this is just me)
Browser/OS/Device:
Replit app/Android /Samsung Galaxy
I have found that it is in front of the bar where you can go back or go forward.
5 Likes
andrei
August 4, 2023, 8:01pm
7
I took a look at this. Two important things:
This happens only on mobile
This happens not only with user status tooltips, but also with some other tooltips that are also implemented using the DTooltip component
On desktop, we use the mouseenter event as a tooltip trigger. When the mouse leaves the tooltip, it disappears, so everything works smoothly.
On mobile, the trigger for tooltip is a click, and for tooltip to disappear user have to click outside the tooltip. Because of that, the tooltip doesn’t disappear when scrolling. This is the default behavior of tooltips made using the tippy.js library that we use under the hood.
I’m working on the fix currently, and already have a working draft. The solution will be to hide the tooltip when scrolling on mobile. And that’ll fix all the DTooltip based tooltips.
3 Likes
andrei
August 15, 2023, 7:35pm
11
Here is the fix for the problem in topics:
discourse:main ← discourse:feature/hide-d-tooltip-when-scrolling-on-mobile
opened 12:08PM - 15 Aug 23 UTC
This fixes the problem reported in https://meta.discourse.org/t/custom-status-me… ssage-in-front-of-by-header-on-scroll/273320.
This problem can be reproduced with any tooltip created using the [DTooltip](https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/components/d-tooltip.gjs) component or the [createDTooltip](https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/lib/d-tooltip.js) function.
The problem happens because the trigger for tooltip on mobile is click, and for tooltip to disappear the user has to click outside the tooltip. This is the default behavior of tippy.js – the library we use under the hood.
Note that this PR fixes the problem in topics, but not in chat. I'm going to investigate and address it in chat in a following PR.
To fix it for tooltips created with the [createDTooltip](https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/lib/d-tooltip.js) function, I had to make a refactoring. We had a somewhat not ideal solution there, we were leaking an implementation detail by passing tippy instances to calling sides, so they could then destroy them. With this fix, I would have to make it more complex, because now we need to also remove `onScrool` handlers, and I would need to leak this implementation detail too. So, I firstly refactored the current solution in 5a4af05 and then added `onScroll` handlers in fb4aabe (cc @jancernik).
When refactoring this, I was running locally some temporarily skipped flaky tests. Turned out they got a bit outdated, so I fixed them. Note that I'm not unskipping them in this commit, we'll address them separately later.
For some reason this doesn’t work in chat, I’ll investigate and fix it in a follow up.
3 Likes
Lilly
August 15, 2023, 8:27pm
12
it’s happening on my iPad in desktop view as well as mobile. in Safari, Chrome and Firefox on iOS 16.6.
1 Like
Hi @andrei !
2 Likes
It doesn’t look like the fix is merged yet, so you may have to wait a little longer to test.
4 Likes
andrei
August 23, 2023, 11:46am
18
We’ve just merged the fix, it’s in the main branch now. Remember it only solves the problem in topics, there is a similar problem in chat, which will be addressed separately later.
2 Likes
Hi @andrei !
1 Like
andrei
August 23, 2023, 6:37pm
20
The fix makes tooltips fade when scrolling. After the fix, on touchscreens tooltips fade when you start scrolling.
1 Like
Right. Thanks for the fix!
1 Like
Hey everyone!
Similar to another bug I reported about the custom status being in front of something, here is another one:
As you can see, the status is still visible, overlapping the sidebar even though the user is scrolled away from view.
1 Like
As you can see, the custom status strikes again!
Another custom status issue:https://meta.discourse.org/t/custom-status-in-front-of-sidebar/277328?u=natedhaliwal
1 Like
andrei
September 4, 2023, 11:32am
27
@NateDhaliwal thank you for reporting these problems!
Note that, more precisely, the problems are related to components that we use for showing rich tooltips across the app. We use rich tooltips for showing status, but we also use them for other things. So potentially the similar issues can be reproduced with other tooltips too. The fix I provided above fixed only the most general cases.
We’re currently working on more changes to the components for rich tooltips, so there’ll be more updates here. We’ll take care of these problems.
5 Likes
There’s one more: in the chat:
I believe this was mentioned already:
2 Likes
andrei
March 28, 2024, 6:05pm
30
@joffreyjaffeux has made a major rework of the tooltips (and other popups) in
discourse:main ← jjaffeux:float-kit-3
opened 02:42PM - 25 Sep 23 UTC
This PR introduces three new concepts to Discourse codebase through an addon cal… led "FloatKit":
- menu
- tooltip
- toast
## Tooltips
### Component
Simple cases can be express with an API similar to DButton:
```hbs
<DTooltip
@Label={{i18n "foo.bar"}}
@ICON="check"
@content="Something"
/>
```
More complex cases can use blocks:
```hbs
<DTooltip>
<:trigger>
{{d-icon "check"}}
<span>{{i18n "foo.bar"}}</span>
</:trigger>
<:content>
Something
</:content>
</DTooltip>
```
### Service
You can manually show a tooltip using the `tooltip` service:
```javascript
const tooltipInstance = await this.tooltip.show(
document.querySelector(".my-span"),
options
)
// and later manual close or destroy it
tooltipInstance.close();
tooltipInstance.destroy();
// you can also just close any open tooltip through the service
this.tooltip.close();
```
The service also allows you to register event listeners on a trigger, it removes the need for you to manage open/close of a tooltip started through the service:
```javascript
const tooltipInstance = this.tooltip.register(
document.querySelector(".my-span"),
options
)
// when done you can destroy the instance to remove the listeners
tooltipInstance.destroy();
```
Note that the service also allows you to use a custom component as content which will receive `@data` and `@close` as args:
```javascript
const tooltipInstance = await this.tooltip.show(
document.querySelector(".my-span"),
{
component: MyComponent,
data: { foo: 1 }
}
)
```
## Menus
Menus are very similar to tooltips and provide the same kind of APIs:
### Component
```hbs
<DMenu @ICON="plus" @Label={{i18n "foo.bar"}}>
<ul>
<li>Foo</li>
<li>Bat</li>
<li>Baz</li>
</ul>
</DMenu>
```
They also support blocks:
```hbs
<DMenu>
<:trigger>
{{d-icon "plus"}}
<span>{{i18n "foo.bar"}}</span>
</:trigger>
<:content>
<ul>
<li>Foo</li>
<li>Bat</li>
<li>Baz</li>
</ul>
</:content>
</DMenu>
```
### Service
You can manually show a menu using the `menu` service:
```javascript
const menuInstance = await this.menu.show(
document.querySelector(".my-span"),
options
)
// and later manual close or destroy it
menuInstance.close();
menuInstance.destroy();
// you can also just close any open tooltip through the service
this.menu.close();
```
The service also allows you to register event listeners on a trigger, it removes the need for you to manage open/close of a tooltip started through the service:
```javascript
const menuInstance = this.menu.register(
document.querySelector(".my-span"),
options
)
// when done you can destroy the instance to remove the listeners
menuInstance.destroy();
```
Note that the service also allows you to use a custom component as content which will receive `@data` and `@close` as args:
```javascript
const menuInstance = await this.menu.show(
document.querySelector(".my-span"),
{
component: MyComponent,
data: { foo: 1 }
}
)
```
## Toasts
Interacting with toasts is made only through the `toasts` service.
A default component is provided (DDefaultToast) and can be used through dedicated service methods:
- this.toasts.success({ ... });
- this.toasts.warning({ ... });
- this.toasts.info({ ... });
- this.toasts.error({ ... });
- this.toasts.default({ ... });
```javascript
this.toasts.success({
data: {
title: "Foo",
message: "Bar",
actions: [
{
label: "Ok",
class: "btn-primary",
action: (componentArgs) => {
// eslint-disable-next-line no-alert
alert("Closing toast:" + componentArgs.data.title);
componentArgs.close();
},
}
]
},
});
```
You can also provide your own component:
```javascript
this.toasts.show(MyComponent, {
autoClose: false,
class: "foo",
data: { baz: 1 },
})
```
Co-authored-by: Martin Brennan <mjrbrennan@gmail.com>
Co-authored-by: Isaac Janzen <50783505+janzenisaac@users.noreply.github.com>
Co-authored-by: David Taylor <david@taylorhq.com>
Co-authored-by: Jarek Radosz <jradosz@gmail.com>
As a part of that work, the issues described in this topic has been also fixed. I’ve just tested and
there are no overlapping of status tooltips in chat
tooltips disappear when opening sidebar
tooltips don’t appear above the bottom navigation toolbar on mobile
2 Likes
