score:1
so the button should not open the tooltip but toggle it.
the button could trigger a toggletooltip
function
<button onclick={toggletooltip}>click</button>
and the toggletooltip
function would look like
const toggletooltip= () => {
setopen(!open);
};
which sets the open
state to the opposite of what it currently is.
score:1
make sure to use stoppropagation and preventdefault when having a button with childs
const handletooltipclose = (e) => {
e.stoppropagation();
e.preventdefault();
setopen(false);
};
const handletooltipopen = (e) => {
e.stoppropagation();
e.preventdefault();
setopen(true);
};
the event continues to propagate as usual, unless one of its event listeners calls stoppropagation() or stopimmediatepropagation(), either of which terminates propagation at once.
score:1
just rewrite your handletooltipopen
function a little bit like this:
const handletooltipopen = () => {
if( open ){
setopen(false);
}else{
setopen(true)
}
};
Source: stackoverflow.com
Related Query
- Close tooltip when clicking again on it in React
- react Portal - how to close modal when clicking outside of modal and how to assign ref to modal inside parent component rendering modal?
- React - Close dropdown menu when clicking on the window
- React onClick event working on twice clicks when clicking again
- How can I close my hamburger menu when clicking on a link using React JS? (using ReactJS hooks)
- Prevent Clicking Again When Submitting Form in React
- Close menu when clicking outside the React component
- React Router work on reload, but not when clicking on a link
- Material UI ClickAwayListener close when clicking itself
- How can I clear the localstorage when user close react application window?
- Why memory leak happend and render slowing down when I close and re-open react component (material-table)?
- Change the state when clicking outside a component in React
- How can I get innerHTML when clicking a button in React js?
- Handle outside click closes on clicking the modal itself. Basically shouldn't close when clicked anywhere but outside of the modal
- Prevent materializecss dropdown to close when clicking inside it
- React - Draggable components with inputs lose the ability to focus when clicking that input
- Close react button dropdown menu on clicking or hovering outside of menu area
- Don't close Dialog(Modal) when click outside in React & HeadlessUI
- How to stop React Player from playing when close modal?
- Switch between divs when clicking prev/next buttons using React Hooks
- React and Parallax : Misplaced parallax image when clicking on in-page navigation link
- React - render component when clicking on a component which is not its child
- I'm trying to close the offcanvas menu in React Bootstrap when I click a link
- Why won't my modal close when clicking the close button?
- React button has blue border around it when clicking
- Clicking a link when enter key is pressed using React
- React Js - How to change URL when clicking on ant design stepper?
- Add a circle when clicking on an img in react
- React Router V5 not rendering route when clicking Link, but back and forward buttons work?
- REACT NATIVE - Change state of screen when close import modal
More Query from same tag
- How to inject port and host using ENV variable in Create React App Proxy settings?
- Routing via browserHistory when using hashHistory doesnt appear to work
- I tried simple print function using react-to-print. Parsing error: Unexpected token, expected ","
- How to validate a non required filed with yup
- ReactJs adding Third party Javascript Plugin
- process.env.NODE_ENV is undefined in my server file
- React alert message is displaying twice
- Can getDerivedStateFromProps be used as an alternative to componentWillReceiveProps
- Reddit text field implementation Material-UI
- How can I store the value of an async function to be used multiple times in a function without having to make the async call multiple times?
- setState doesn't update as expected
- How to use Real time chart in react?
- Property 'msHidden' does not exist on type 'Document'
- Workaround for a React-router Route wrapper
- useContext returns an empty array
- How to update upvote counter for individual elements instead of all of them at once with React
- JSON & REACT 16.8 TypeError: _data_projects_json__WEBPACK_IMPORTED_MODULE_2__.map is not a function
- Can I send an AJAX call in React and Redux without action creators and reducers?
- Using D3, how to iterate over a non-uniform matrix (of categories) and draw rectangles based on category-color map?
- Counter increment on setInterval
- Dynamic rendering of sections/divs according to an array of objects in React.JS
- How to use Redux Tool Kit 'mutations' with TypeScript: "Property 'push' does not exist on type"
- React Show a custom modal on browser back button
- npx create-react-app myapp error "\AppData\Roaming\npm-cache\_npx\19748" does not contain a package.json file in appdata folder
- How do I clear the React Root Window programatically?
- Dangerously Set innerHTML React
- Issue with useState and React.FC in typescript
- How to render a React component with Python Tornado template?
- Filtering array's object and returning parameters
- React Calculator: How to prevent multiple decimals?