add tooltips in FE app as much as possible

[andrewm4894]

trafficstars

i think it could be useful to have tooltips or maybe even "i" icons to get as much info or context i might need from within the app

for example i'm not really sure what "Reply as user" means, what is it, what is expected of me, etc.

this could help as users can maybe get 80% of context they need from within the app.

perhaps a popup model that could be used throughout the app might work.

[andrewm4894]

another example - im not sure what these flags are for

[Shtoner]

Just made the solution in a reusable function component with JS and CSS hover, does it need to converted to TypeScript?

import utilStyles from '../styles/utils.module.css'

export default function Tooltips({children,props}){
    return(
        <div className={utilStyles.tooltip}
        title={props}>
                <main>{children}</main>

        </div>
    )
}

[Shtoner]

TBH it might not even be worth it to add a reusable component and you could just use the CSS needed by adding the tooltip className directly into JSX along with needed data attribute(changed from title so there wouldn't be a duplicate that's not styled). CSS here

.tooltip:hover::after{
  background: rgba(0,0,0,.8);
  border-radius: 5px;
  color: #fff;
  content: attr(data);
  padding: 5px 15px;
  position:fixed;
  z-index: 3;
}

[fozziethebeat]

Chakra has a tooltip component. Please use that and start adding it everywhere that's sensible.

When making the changes, please update just a few components at a time (or one task and it's relevant components). That'll keep the PRs small and fast to review and merge.

[fozziethebeat]

I don't think this is essential for the MVP. It's a nice to have but more of a usability improvement. Removing this from the milestone to cleanup the high priority items.

[fozziethebeat]

I'm going to close this super bug in favor of specific features needing tooltips