Initial work on tool tip integration #1516
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
| icon={faQuestionCircle} | ||
| className="text-secondary" | ||
| /> | ||
| </span> |
There was a problem hiding this comment.
We could pass the Icon in as a(n optional) prop and make this the base tooltip component for the project. (Keep the faquetioncircle icon as the default/fallback icon.)
| placement={placement} | ||
| overlay={ | ||
| <Tooltip | ||
| onMouseEnter={() => onMouseOver(true)} |
There was a problem hiding this comment.
we shouldn't have to show/hide the overlay manually, bootstrap overlaytrigger should be taking care of that...
There was a problem hiding this comment.
The bootstrap overlay trigger does take care of it, but when we have a link in tooltip, then clicking on the link did not seem possible unless state is maintained like I have done so.
| // add the tooltip div at the beginning of the form | ||
| citySearch?.prepend(toolTip); | ||
| // add the component to the div using the ref | ||
| toolTip.append(nodeRef?.current!); |
There was a problem hiding this comment.
- we should try to use the search library tools/options to customize the widget. I haven't seen the option to add a tooltip yet, but we should keep digging. I would think there would be something in there for this common req.
- we should go back and talk to design--I'm sure design team can generate plenty of other great solutions to add a tooltip without having to alter the widget ui and without having to directly interacting with the dom.
I realize part of the tooltip existing in the project may have been built like this way back when (by me, probably). Sorry for the bum steer if so. I don't remember why I did it this way then, but we should make a different choice now...likely not the best choice at the time either? we'll never know for sure ....
There was a problem hiding this comment.
I did spend quite a bit of time looking into the search library options. It looked to me as we are using a package that is very customised for the use case, so most of the general documentation is not of very much help :(
Although the refinement list and it's elements are customisable, it does not fit in with the components which we have used :(
This is some work I did before the website wide tool tip review process started. The current code changes only add the tool tip beside the City refinement box, but I can potentially work on integrating other tool tips as well.
Screenshot of current tool tip
Major caveat
My current approach does not render the tool tip on mobile screens because of a component lifecycle issue, but based on other changes/feedback, the implementations will definitely have to be changed.