A customizable tooltip built using ReactJS.
This project was bootstrapped with Create React App.
- Clone repository
- Do an NPM install
- Run NPM start
- Type a message into the input box
- Hover over "Hover over me" text to see the tooltip display
- Positioning: relative (defined in App.css .tooltip position)
- onMouseEnterDelay:
--On intial render, set to 0s.
--Subsequent entries will change to a 1s delay.
--Can be changed in the handleMouseEnterDelay function in App.js - onMouseLeaveDelay:
--Set to 1s.
--Can be changed in the handleMouseLeaveDelay function in App.js
- App.js: used as the TooltipContainer to store logic and JSX
- App.css: CSS styles
- index.js: used to render DOM
- index.html: contains the root element
- Expose some way to let consumers provide the content of the tooltip
Pros:
--User friendly: user can modify the message via UI
--Easy
Cons:
--Generally, tooltips are not implemented as such - they have a static message. Otherwise, alternative implementation would have been to make the message customizable via code by adding it as a prop in the render.
--For simplicity purposes, there isn't a clear message button implemented. User has to manually delete the text. - Adding a delay
Pros:
--User can customize the delay timings for mouse enter/leave events
Cons:
--After the first hover, the transitionDelay value remains at the timing set for the mouse leave event.
--Alternative solution, the values can be custominzed via the CSS file - it will remain fixed on each hover.
--Being new to ReactJS, I don't have enough understanding of the lifecycle methods. As a consequence, I didn't understand how I can reset the state, so that with each new hover the delay time would reset to what was defined in handleMouseEnterDelay/handleMouseLeave Delay functions.