I want to use the material-ui react tooltip on the following component:
const Icon = ({
name,
color,
size,
}) => {
return (
<i
aria-hidden='true'
style={{
fontSize: size,
color,
}}>
{name}
</i>
)
};
export default Icon;
The Icon is created through an Iconfont.
Implementing the tooltip like this does not work - no tooltip is showing
...
icons.map(icon => {
<Tooltip
title='Foo'
placement='right'>
<Icon
size={icon.size}
color={icon.color}
name={icon.name} />
</Tooltip>
}
...
But, replacing the <Icon /> through a simple <i>, works.
...
icons.map(icon => {
<Tooltip
title='Foo'
placement='right'>
<i>
{'Bar'}
</i>
</Tooltip>
}
...
How can I use the material-ui react tooltip with th <Icon /> component?
Related
I am trying to replace recharts default tooltip with custom tooltip.
The existing tooltip looks like this.
I wanted to replace the above default tooltip as
I made sandbox for the code.
Thanks
Very quick solution. You can alter it as you want
Create a custom tooltip class
export const CustomTooltip = ({ active, payload, label }) => {
if (active && payload && payload.length) {
return (
<div className="custom-tooltip">
<p className="label">{`${label} : ${payload[0].value}`}</p>
<div>
{payload.map((pld) => (
<div style={{ display: "inline-block", padding: 10 }}>
<div style={{ color: pld.fill }}>{pld.value}</div>
<div>{pld.dataKey}</div>
</div>
))}
</div>
</div>
);
}
return null;
};
And use it like this
<Tooltip content={<CustomTooltip />} cursor={{ fill: "transparent" }} />
demo
Here I have an image of the current header render. The headercomprises of a HeaderMenu and 3 Links. The links are working fine, but the HeaderMenu is causing the links to fall below it. HeaderMenu contains a div which wraps a Button and Popper, acting as a dropdown menu.
I'm also not sure if this design structure is correct, but for the styles, I have one styles.js file which I pull from. I then pass these styles down as props to the smaller components for rendering. That's why the components here have a props classes that comes from useStyles in index.js.
Header.js
import { AppBar, Button, Link, Toolbar, Typography } from '#material-ui/core'
import HeaderMenu from './HeaderMenu.js'
const Header = (props) => {
const { classes } = props
return (
<AppBar position="static" color="default" elevation={0} className={classes.appBar}>
<Toolbar className={classes.toolbar}>
<Typography variant="h6" color="inherit" noWrap className={classes.toolbarTitle}>
Company name
</Typography>
<nav>
<HeaderMenu classes={classes}/>
<Link variant="button" color="textPrimary" href="#" className={classes.link}>
Here
</Link>
<Link variant="button" color="textPrimary" href="#" className={classes.link}>
Enterprise
</Link>
<Link variant="button" color="textPrimary" href="#" className={classes.link}>
Support
</Link>
</nav>
<Button href="#" color="primary" variant="outlined" className={classes.link}>
Login
</Button>
</Toolbar>
</AppBar>
)
}
export default Header
HeaderMenu.js
import React from 'react'
import { Button, ClickAwayListener, Grow, Paper, Popper, MenuItem, MenuList } from '#material-ui/core'
const HeaderMenu = (props) => {
const { classes } = props
const [open, setOpen] = React.useState(false)
const anchorRef = React.useRef(null)
const handleToggle = () => {
setOpen((prevOpen) => !prevOpen)
}
const handleClose = (event) => {
if (anchorRef.current && anchorRef.current.contains(event.target)) {
return
}
setOpen(false)
}
function handleListKeyDown (event) {
if (event.key === 'Tab') {
event.preventDefault()
setOpen(false)
}
}
// return focus to the button when we transitioned from !open -> open
const prevOpen = React.useRef(open)
React.useEffect(() => {
if (prevOpen.current === true && open === false) {
anchorRef.current.focus()
}
prevOpen.current = open
}, [open])
return (
<div className={classes.link}>
<Button
ref={anchorRef}
aria-controls={open ? 'menu-list-grow' : undefined}
aria-haspopup="true"
onClick={handleToggle}
>
Details
</Button>
<Popper open={open} anchorEl={anchorRef.current} role={undefined} transition disablePortal>
{({ TransitionProps, placement }) => (
<Grow
{...TransitionProps}
style={{ transformOrigin: placement === 'bottom' ? 'center top' : 'center bottom' }}
>
<Paper>
<ClickAwayListener onClickAway={handleClose}>
<MenuList autoFocusItem={open} id="menu-list-grow" onKeyDown={handleListKeyDown}>
<MenuItem onClick={handleClose}>Profile</MenuItem>
<MenuItem onClick={handleClose}>My account</MenuItem>
<MenuItem onClick={handleClose}>Logout</MenuItem>
</MenuList>
</ClickAwayListener>
</Paper>
</Grow>
)}
</Popper>
</div>
)
}
export default HeaderMenu
You should wrap all your links into a div and then add this to your <nav></nav>
display: flex;
justify-content: space-evenly;
align-items: center;
This will allow it to stay everything in the same line.
I'm just trying to learn material ui for react especially makeStyles.
I've the following javascript code.
import React from "react";
import MenuIcon from "#material-ui/icons/Menu";
import EventNoteIcon from "#material-ui/icons/EventNote";
import ScheduleIcon from "#material-ui/icons/Schedule";
import NoteIcon from "#material-ui/icons/Note";
import AttachMoneyIcon from "#material-ui/icons/AttachMoney";
import NotificationsIcon from "#material-ui/icons/Notifications";
import Brightness4Icon from "#material-ui/icons/Brightness4";
import AccountCircleIcon from "#material-ui/icons/AccountCircle";
import { Button, IconButton, makeStyles, Tooltip } from "#material-ui/core";
export default function Dashboard() {
const useStyles = makeStyles({
whiteIcon: {
color: "white",
},
blueBtn:{
color: "#717171",
border: "2px solid #5B97CF",
borderRadius: 9,
backgroundColor: 'white'
}
});
const classes = useStyles();
return (
<div className="wrapper">
<div className="navbar">
<div className="icons">
<Tooltip title="Menu" placement="right">
<IconButton classes={classes.whiteIcon}>
<MenuIcon style={{ color: "white" }} />
</IconButton>
</Tooltip>
<Tooltip title="My Appointments" placement="right">
<IconButton>
<EventNoteIcon style={{ color: "white" }} />
</IconButton>
</Tooltip>
<Tooltip title="My Daily schdule" placement="right">
<IconButton>
<ScheduleIcon style={{ color: "white" }} />
</IconButton>
</Tooltip>
<Tooltip title="My Projects" placement="right">
<IconButton>
<NoteIcon style={{ color: "white" }} />
</IconButton>
</Tooltip>
<Tooltip title="Expense Manager" placement="right">
<IconButton>
<AttachMoneyIcon style={{ color: "white" }} />
</IconButton>
</Tooltip>
</div>
</div>
<div className="dash-container">
<div className="header">
<Tooltip title="Notifications">
<IconButton>
<NotificationsIcon />
</IconButton>
</Tooltip>
<Tooltip title="Toogle Light/Dark Mode">
<IconButton>
<Brightness4Icon />
</IconButton>
</Tooltip>
<Tooltip title="Your Account">
<Button startIcon={<AccountCircleIcon />} classes={classes.blueBtn} >Your Account</Button>
</Tooltip>
</div>
<div className="dash-content">
<div className="dash-recent-projects"></div>
<div className="other"></div>
</div>
</div>
</div>
);
}
As you can see the design is very simple. I want to make a navbar and a header that holds some icons with their tool tips. I want to customize the icons by changing the colour using makeStyles. Also I want to customize the default ugly material as well. I don't know where I went wrong. Pls help me 🙏🙏
For reference, I'm also attaching the image of output.
And one more thing
I'm using django and react together. However django takes care of the backend only. No idea whether it has anything to do with my problem but still . . . :)
The issue is on your use of mui classes property where whiteIcon and blueBtn should be the key to the CSS rule names you find here for IconButton and here: for Button. scroll down to the CSS part.
so should be, for example: classes={{root: classes.blueBtn}}
please mark as response if you're satisfied
regards
This is Header.js where I have the button <ReactSvg>, inside <IconButton> when you click it, it will change the page theme with the switchTheme() function. When you hover over the button it also has a popover where it declares the function of the button (ex. switch theme).
For some reason I hover the button the popover comes out but doesn't let me click on the button even if I click very fast and vigorously. Somehow the popover has disabled the button.
Header file where the button is rendered:
import React, { useState } from 'react'
import ReactSvg from './reactSvg'
import { Box, Typography, Link, Container, IconButton } from '#material-ui/core'
import PhoneIcon from '#material-ui/icons/Phone'
import EmailIcon from '#material-ui/icons/Email'
import GitHubIcon from '#material-ui/icons/GitHub'
import LinkedInIcon from '#material-ui/icons/LinkedIn'
import { useStyles } from '../styles/customStyles'
import Image from 'material-ui-image'
import PopOver from './PopOver'
const styles = {
image: {
maxWidth: 200,
minWidth: 200,
},
}
export default function Header({ switchTheme }) {
const classes = useStyles()
const [anchorEl, setAnchorEl] = useState(null)
const handleTheme = () => {
switchTheme()
}
const handleHover = (e) => {
setAnchorEl(e.currentTarget)
}
return (
<>
<Box>
<IconButton onClick={() => handleTheme()} onMouseOver={(e) => handleHover(e)}>
<ReactSvg />
</IconButton>
<Typography variant="h3" color="primary">
Staz Christodoulakis
</Typography>
<Typography variant="body1" color="primary">
Software Engineer · Web/App
</Typography>
<hr className="solid" />
<Box
display="flex"
alignItems="center"
justifyContent="center"
className={classes.root}
flexWrap="wrap"
>
<Link color="secondary" variant="body1" href="tel: 650-409-6202">
<Box display="flex">
<PhoneIcon /> 650 409 6202
</Box>
</Link>
<Link color="secondary" variant="body1" href="mailto: staz.christo#gmail.com">
<Box display="flex">
<EmailIcon /> staz.christo#gmail.com
</Box>
</Link>
<Link href="https://github.com/stazcp" color="secondary" variant="body1">
<Box display="flex">
<GitHubIcon /> github.com/stazcp
</Box>
</Link>
<Link href="https://www.linkedin.com/in/staz-christo" color="secondary" variant="body1">
<Box display="flex">
<LinkedInIcon /> linkedin.com/in/staz-christo
</Box>
</Link>
</Box>
</Box>
<PopOver anchorEl={anchorEl} setAnchorEl={setAnchorEl} />
</>
)
}
Popover:
import React, { useState, useEffect } from 'react'
import { makeStyles } from '#material-ui/core/styles'
import Popover from '#material-ui/core/Popover'
import Typography from '#material-ui/core/Typography'
import Button from '#material-ui/core/Button'
const useStyles = makeStyles((theme) => ({
typography: {
padding: theme.spacing(2),
},
}))
export default function SimplePopover({ anchorEl, setAnchorEl }) {
const classes = useStyles()
const handleClose = () => {
setAnchorEl(null)
}
const open = Boolean(anchorEl)
const id = open ? 'simple-popover' : undefined
return (
<div>
<Popover
id={id}
open={open}
anchorEl={anchorEl}
onClose={handleClose}
anchorOrigin={{
vertical: 'bottom',
horizontal: 'center',
}}
transformOrigin={{
vertical: 'top',
horizontal: 'center',
}}
>
<Typography className={classes.typography}>
Click on React Symbol to change theme!
</Typography>
</Popover>
</div>
)
}
Why is that the onMouseOver event blocking the onClick event?
Can you try stopPropagation?
const handleHover = (e) => {
e.stopPropagation();
setAnchorEl(e.currentTarget)
}
So I found a solution to my problem by using a Tooltip provided by Material UI.
https://material-ui.com/components/tooltips/
Like this:
<Tooltip title="Click Me!" placement="right" arrow>
<IconButton
onClick={() => handleTheme()}
// onMouseOver={(e) => handleHover(e)}
>
<GetIcon icon={reactLogo} className="reactLogo" />
</IconButton>
</Tooltip>
if anyone has managed to use different methods for mouse events on Material UI buttons please post here.
Thanks!
I have recently started doing React programming and I am currently working on sidebar navigation. I am using React Semantic UI for my website and I have buttons for my navigation. However there is a problem I can't find a solution for, I am trying to disable the hover effect on buttons and I've tried multiple things (assigning a class to Button Group/ div and try to access it from CSS for example) but without luck. Here's my code any suggestions will be appreciated
import React, { Component } from "react";
import { Button, Icon } from "semantic-ui-react";
import "../styles/DotNav.css";
export default class DotNav extends Component {
state = { activeItem: "home" };
handleContextRef = contextRef => this.setState({ contextRef });
handleItemClick = (e, { name }) => this.setState({ activeItem: name });
render() {
return (
<div style={{ position: "fixed", marginLeft: 1370, marginTop: 100 }}>
<Button.Group vertical className="ui black Change">
<Button basic>
<Icon name="minus" color="white" />
</Button>
<Button className="btn" basic>
<Icon name="minus" color="white" />
</Button>
<Button basic>
<Icon name="minus" color="white" />
</Button>
</Button.Group>
</div>
);
}
}
Maybe your path to element is invalid, check my snippet:
https://codepen.io/anon/pen/QVQjMY
const {
Button,
Container,
Divider,
Header,
Icon,
Message,
} = semanticUIReact
class App extends React.Component {
render() {
return (
<Button.Group vertical className="ui black change">
<Button>
<Icon name="minus" color="white" />
</Button>
<Button className="btn">
<Icon name="minus" color="white" />
</Button>
<Button>
<Icon name="minus" color="white" />
</Button>
</Button.Group>
)
}
}
// ----------------------------------------
// Render
// ----------------------------------------
const mountNode = document.createElement('div')
document.body.appendChild(mountNode)
ReactDOM.render(<App />, mountNode)
body {
background-color: red;
}
.ui.black.change button:hover{
background-color: teal!important;
}