[$200] Update the user tooltip with a unified component in all instances

[vic-georgiev]

Let's use the same component consistently in the system.

Hovering over the user avatar in short form (picture only) I want to see the full details of the user.

Hovering over the extended user avatar (picture and name/handle) should be the same.

Right now the projects grid auto-generates the HTML for each user and displays it on hover. We should be smarter and not generate too much HTML for the browser - this slows down performance and tracing the DOM/manipulations.

[gondzo]

the scope here are avatars in project listing (grid and card view), project members list in project details and avatars in topic posts on project dashboard

[passimm]

hi, here is my understanding of the request, not sure i understand correct. could you correct me or shed more light?

1. we're already using a component "UserTooltip" in projectGridView. the component itself needs no change.
2. we should leverage this component in other places whenever a user avatar/name/handle is displayed.

[vic-georgiev]

1. The tooltip component should be smart enough to detect viewport edges. This will allow the tooltip to be always visible in all cases. Right now the tooltip isn't smart enough and always shows in the same position (above the item). Check http://wwayne.com/react-tooltip/ for viewport detection. Adding the tooltip in the grid component generates a tooltip with data for each avatar, on every row, and this increases the amount of HTML generated. Parsing the HTML and CSS for all the extra tooltips slows down page performance. The goal is to reduce the generated code significantly. More about smarter tooltip strategies here: https://medium.com/@CunningFatalist/tooltip-best-practices-3155f8daa6dc. I like the idea of reusing the data for tooltips through UID, assigned for each unique avatar. We have a lot of avatars that are repeated throughout the grid, so we don't need to transmit that code over and over again, or render it all the time. The idea of a single HTML component that is updated through event handler is even better, as long as we don't transmit all the data needed all the time. Ideally we can have:

   • One HTML component that is positioned, displayed, and modified with appropriate data through event handler.
   • All the tooltip data is transferred alongside the project data so we don't do too many additional calls to the server. Ideally the tooltip data is available as an array of UID data for each avatar. This data is used to render all the Avatars and populate the tooltip on hover. Also - if we can use local store to keep this that for later use it'll be great - cache optimization. The grid is heavily used by small amount of users, so caching the data makes a lot of sense for them.

2. Yes - the tooltip component should be using other components to render different content in different cases. Right now we want to attach the tooltip component to all instances of avatars so we display the data consistently. Tooltip should use controlled components to render what is needed.

[maxceem]

@vic-topcoder

1. Could please share with me any existent case when tooltip should behave smartly to respect viewport edges but it doesn't.

2. I'm checking existent implementations if any fit our requirements. Is that ok, or you prefer improving our own implementation?

[gondzo]

1. I think this is one of the cases
   

2. either is fine IMO