Navigate back to the homepage

How to make tooltip clickable in react material UI?

Infinitbility
React
November 27th, 2021 · 1 min read
How to make tooltip clickable in react material UI?

Hello Friends 👋,

Welcome To Infinitbility! ❤️

React material ui ( mui ) provide awesome tooltip componant to show tooltip in web but sometime we need to add close icon, or link in tooltip now after your hardwork you are add your link or close icon in tooltip now problems come when you want to click on those things.

ahem, ( clear throat )

In this tutorial, we will learn how we can make react material ui tooltip clickable.

Let start today’s tutorial How to make tooltip clickable in react material UI?

React material ui provide interactive option to make anchor and other things clickable.

material ui provide interactive={true} in default, but due to some version issue you are not able to anchor and other clickable things try with interactive={true}.

Let take an example, to see how u can write clickable things in tooltip.

Tooltip example

1<Tooltip interactive={true} disableFocusListener title={
2 <>
3 <a href="https://infinitbility.com" target="_BLANK">infinitbility.com</a>
4 </>
5 }>
6<Button>Hover or touch</Button>
7</Tooltip>

Complete tooltip example

1import * as React from 'react';
2import Grid from '@mui/material/Grid';
3import Button from '@mui/material/Button';
4import Tooltip from '@mui/material/Tooltip';
5import ClickAwayListener from '@mui/material/ClickAwayListener';
6
7export default function TriggersTooltips() {
8 const [open, setOpen] = React.useState(false);
9
10 const handleTooltipClose = () => {
11 setOpen(false);
12 };
13
14 const handleTooltipOpen = () => {
15 setOpen(true);
16 };
17
18 return (
19 <div>
20 <Grid container justifyContent="center">
21 <Grid item>
22 <Tooltip interactive={true} disableFocusListener title={
23 <>
24 <a href="https://infinitbility.com" target="_BLANK">infinitbility.com</a>
25 </>
26 }>
27 <Button>Hover or touch</Button>
28 </Tooltip>
29 </Grid>
30 <Grid item>
31 <ClickAwayListener onClickAway={handleTooltipClose}>
32 <div>
33 <Tooltip
34 interactive={true}
35 PopperProps={{
36 disablePortal: true,
37 }}
38 onClose={handleTooltipClose}
39 open={open}
40 disableFocusListener
41 disableHoverListener
42 disableTouchListener
43 title={
44 <>
45 <a href="https://infinitbility.com" target="_BLANK">infinitbility.com</a>
46 </>
47 }
48 >
49 <Button onClick={handleTooltipOpen}>Click</Button>
50 </Tooltip>
51 </div>
52 </ClickAwayListener>
53 </Grid>
54 </Grid>
55 </div>
56 );
57}

Tooltip output

material-ui, mui, tooltip, Example

Thanks for reading…

Follow me on Twitter

Join our email list and get notified about new content

No worries, I respect your privacy and I will never abuse your email.

Every week, on Tuesday, you will receive a list of free tutorials I made during the week (I write one every day) and news on other training products I create.

Looking For React Native Tutorial?

we are trying to create the best Tutorial for react native developers.

When you want a daily updates about React Native Tutorial or infinitbility update subscribe to our newsletter.

Read React Native Tutorial

Request New Tutorial or Article on mail [email protected]

Guide book

Guidebook: The Javascript Monorepo

Tutorials

Categories

More articles from Infinitbility

How to add key and value in array of objects in javascript?

How to add key and value in array of objects in javascript?

Example of add key and value in array of objects in javascript, React, React Native, vue, node, deno, and all javascript framework.

November 26th, 2021 · 1 min read
How to create a ref of the functional component in React?

How to create a ref of the functional component in React?

Example of creating ref of custom functional componant.

November 18th, 2021 · 1 min read
© 2020–2022 Infinitbility
About
Link to $https://medium.com/infinitbilityLink to $https://www.facebook.com/InfinitbilityLink to $https://github.com/infinitbilityLink to $https://twitter.com/infinitbilityLink to $https://www.buymeacoffee.com/infinitbilityLink to $mailto:[email protected]