score:3
Accepted answer
you need to provide the interactive
prop for the tooltip
. when interactive
is not specified, tooltip
disables pointer events (so click doesn't do anything), but pointer-events
is set to auto
when interactive is true. the interactive
prop also prevents the tooltip
from immediately closing as you move the mouse from the triggering element to the tooltip
.
here is a working example:
import react from "react";
import deleteicon from "@material-ui/icons/delete";
import iconbutton from "@material-ui/core/iconbutton";
import tooltip from "@material-ui/core/tooltip";
export default function simpletooltips() {
return (
<div>
<tooltip
interactive
title={
<div onclick={() => console.log("clicked tooltip text")}>delete</div>
}
>
<iconbutton aria-label="delete">
<deleteicon />
</iconbutton>
</tooltip>
</div>
);
}
Source: stackoverflow.com
Related Query
- onClick is not working on Popper component in Material-UI Tooltip
- Select is not working onClick IconComponent(dropdown-arrow) in react material ui
- Material ui tooltip is not working on mobile
- onClick not working on my React component
- Material UI styles not working in component (warning: several instances of `@material-ui/styles`)
- onclick props not working with Material UI?
- React - Material UI - TextField controlled input with custom input component not working properly losing focus
- onclick handler not working on component
- Not able to add, update, delete rows in material table react using class based component. Previously it was working with functional component
- onClick handler to call Material UI dialog box, is not working properly
- onClick event not working within nested React / Next.js component
- OnClick function not working with custom button Component
- Material UI Tooltip not working with react-select options
- onClick event in React parent component is not working
- material ui slider component onChange event not working with Fromik handleChange event
- Dynamic Component onClick not working
- Change color of Material UI Select component border not working
- Material UI Grid not working properly with Paper Component for nested Grid
- Material UI popover not working with react class component
- Menu material UI component in React is not working when using class extended as Component
- Reactjs/Nextjs onClick event not working for external component
- onClick in button tag is not working in react component
- Onclick function not working for glyphycons in reactjs component
- React component onClick handler not working
- React Material UI RadioGroup not working with FormControlLabel returned by component
- onClick not working from a mapped component
- React Material UI Button component not working
- Material UI Tooltip does not appear when rendered inside of a custom Modal component
- Styled Component (button) not working with onClick
- onClick not working in React functional component
More Query from same tag
- JSX question with ahref tags. Different text input int the backend and need it to render on the react front end as a hyperlink
- Redux state props undefined and ComponentDidMount not firing
- ContextAPI: How would one share data between contexts in React?
- Typescript Compile Error: Type '{}' is not assignable to type 'T'
- how to access props inside form
- How to automatically add a new token to the select box?
- How to include new google material design icon inside node modules?
- Find key by its index number in an object list and replace with new user input value
- How can I remove "net::ERR_NAME_NOT_RESOLVED"?
- How to get setInterval to run callback function once before applying delay
- Firebase Functions Can't set headers after they are sent
- As soon as I drag and drop, checkbox is set to true regardless of the function mapped to checked, how can I fix this?
- React .- reduce() within JSX not rendering
- I am working with TypeScript and React and I need to detect a click for a dynamically created element in my document
- useState in a createHigherOrderComponent
- My ReactJS initialState change when my state changes
- JavaScript function syntax in Next.js / JSX?
- How to implemet useMutation from react-query in handleSubmit
- Avoiding rerender using callback in child component whenever state in parent changes
- Trace why a React component is re-rendering
- Updating React 17 to React 18 - Typescript - Children of ReactNode type no longer handles inline conditional rendering of `void`
- Delete function deletes an item but it automatically comes back Error : React
- Should I set default react properties to null
- Moving an image up and down continuously in React
- Why does my React component display incorrect data when filtering by values controlled by useState()?
- How to match the question id in the nested table to the main table
- React Mui TextField for currency input - how to permit enter digits only in iPhone Safari browser
- Selected MenuItem not displayed when selected from Select
- What are firebase.analytics() default logged events for a web app?
- "Res.redirect" Not Working when making Ajax call from React to Node?