search

RocketChat / EmbeddedChat

An easy to use full-stack component (ReactJS) embedding Rocket.Chat into your webapp
https://rocketchat.github.io/EmbeddedChat/docs
126 stars 252 forks source link

Implement tooltips #307

Closed Yashraj7890 closed 11 months ago

Yashraj7890 commented 1 year ago

The RocketChat desktop has these nice and clean pop ups which appear while hovering over a particular element and also provide info about the element.

The video below may provide a clearer description:

https://github.com/RocketChat/EmbeddedChat/assets/98230836/099fe217-c799-4803-a79d-554e33e9a2ed

I would love to implement these kinds of pop-ups for the suitable elements in the embedded chat component.

abhinavkrin commented 1 year ago

Hey @Yashraj7890 , that would be nice to add. It will also help users know about the action the button performs. Could you share what approach you would take to implement it.

Yashraj7890 commented 1 year ago

Hey @abhinavkrin I think designing a separate tooltip component and then making the component trigger only while hovering over the elements would do the job.

abhinavkrin commented 1 year ago

@Yashraj7890 That would be a nice solution. We could create a popover component that would wrap its children. Whenever the component is hovered the popover should be displayed. It would be even nicer if we could detect long press on mobiles to display the popover.

Yashraj7890 commented 1 year ago

@abhinavkrin for sure,we could try to do that too.

Yashraj7890 commented 1 year ago

So @abhinavkrin should I go ahead with it or would you like to add something else to it?

abhinavkrin commented 1 year ago

Yes. You can create a pr for this. You can keep the name Tooltip or as you like it.

Yashraj7890 commented 11 months ago

Hey @abhinavkrin after a bit of research and going through the types of UI-based corner cases I might face while implementing tooltips, (an example) :

Screenshot (31)

I have decided to go and use tooltips provided by MUI, which also makes it easier for us to inject tooltips for any other component which may be introduced afterwards.

A corresponding PR has been raised by me.