Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Tooltip] Add enterNextDelay prop #19766

Merged
merged 3 commits into from Feb 21, 2020
Merged

[Tooltip] Add enterNextDelay prop #19766

merged 3 commits into from Feb 21, 2020

Conversation

Ritorna
Copy link
Contributor

@Ritorna Ritorna commented Feb 18, 2020 •
edited by oliviertassinari

Closes #19765

@mui-pr-bot
Copy link

mui-pr-bot commented Feb 18, 2020 •
edited

Details of bundle changes.

Comparing: 264684b...40497b8

bundle Size Change Size Gzip Change Gzip
@material-ui/core ▲ +76 B (+0.02% ) 362 kB ▲ +45 B (+0.05% ) 99.1 kB
SpeedDialAction ▲ +76 B (+0.06% ) 119 kB ▲ +36 B (+0.10% ) 37.6 kB
Tooltip ▲ +76 B (+0.07% ) 103 kB ▲ +35 B (+0.11% ) 32.4 kB
docs.main ▲ +76 B (+0.01% ) 604 kB ▲ +29 B (+0.01% ) 196 kB
@material-ui/lab ▲ +76 B (+0.04% ) 194 kB ▲ +7 B (+0.01% ) 57.2 kB
@material-ui/core[umd] ▲ +74 B (+0.02% ) 318 kB ▲ +35 B (+0.04% ) 92.2 kB
@material-ui/styles -- 51.4 kB -- 15.4 kB
@material-ui/system -- 16.5 kB -- 4.32 kB
Alert -- 83.8 kB -- 26.3 kB
AlertTitle -- 64.5 kB -- 20.3 kB
AppBar -- 64.4 kB -- 20.2 kB
Autocomplete -- 132 kB -- 41.4 kB
Avatar -- 65.6 kB -- 20.7 kB
AvatarGroup -- 62.7 kB -- 19.7 kB
Backdrop -- 68.2 kB -- 21.1 kB
Badge -- 65.7 kB -- 20.4 kB
BottomNavigation -- 62.7 kB -- 19.7 kB
BottomNavigationAction -- 75.9 kB -- 24 kB
Box -- 72.2 kB -- 21.9 kB
Breadcrumbs -- 80.8 kB -- 25.4 kB
Button -- 80.1 kB -- 24.5 kB
ButtonBase -- 74.4 kB -- 23.3 kB
ButtonGroup -- 83.6 kB -- 25.6 kB
Card -- 63.2 kB -- 19.8 kB
CardActionArea -- 75.5 kB -- 23.8 kB
CardActions -- 62.4 kB -- 19.6 kB
CardContent -- 62.3 kB -- 19.5 kB
CardHeader -- 65.4 kB -- 20.6 kB
CardMedia -- 62.7 kB -- 19.7 kB
Checkbox -- 83.4 kB -- 26.3 kB
Chip -- 83 kB -- 25.4 kB
CircularProgress -- 64.4 kB -- 20.3 kB
ClickAwayListener -- 3.91 kB -- 1.55 kB
Collapse -- 68.4 kB -- 21.2 kB
colorManipulator -- 3.88 kB -- 1.52 kB
Container -- 63.5 kB -- 19.9 kB
CssBaseline -- 62.3 kB -- 19.6 kB
Dialog -- 83.4 kB -- 26 kB
DialogActions -- 62.4 kB -- 19.6 kB
DialogContent -- 62.6 kB -- 19.6 kB
DialogContentText -- 64.4 kB -- 20.2 kB
DialogTitle -- 64.6 kB -- 20.3 kB
Divider -- 63 kB -- 19.8 kB
docs.landing -- 56.8 kB -- 15.6 kB
Drawer -- 85.2 kB -- 25.9 kB
ExpansionPanel -- 72.7 kB -- 22.7 kB
ExpansionPanelActions -- 62.4 kB -- 19.6 kB
ExpansionPanelDetails -- 62.3 kB -- 19.5 kB
ExpansionPanelSummary -- 78.5 kB -- 24.8 kB
Fab -- 77.2 kB -- 24.1 kB
Fade -- 23.6 kB -- 8.01 kB
FilledInput -- 74 kB -- 23 kB
FormControl -- 64.8 kB -- 20.2 kB
FormControlLabel -- 65.9 kB -- 20.6 kB
FormGroup -- 62.3 kB -- 19.6 kB
FormHelperText -- 63.7 kB -- 20 kB
FormLabel -- 63.8 kB -- 19.8 kB
Grid -- 65.4 kB -- 20.5 kB
GridList -- 62.8 kB -- 19.7 kB
GridListTile -- 64.1 kB -- 20.1 kB
GridListTileBar -- 63.6 kB -- 19.9 kB
Grow -- 24.2 kB -- 8.22 kB
Hidden -- 66.3 kB -- 20.8 kB
Icon -- 63.1 kB -- 19.8 kB
IconButton -- 76.6 kB -- 23.9 kB
Input -- 73 kB -- 22.8 kB
InputAdornment -- 65.4 kB -- 20.6 kB
InputBase -- 71.1 kB -- 22.3 kB
InputLabel -- 65.7 kB -- 20.5 kB
LinearProgress -- 65.7 kB -- 20.5 kB
Link -- 67 kB -- 21.1 kB
List -- 62.7 kB -- 19.6 kB
ListItem -- 77.6 kB -- 24.2 kB
ListItemAvatar -- 62.5 kB -- 19.5 kB
ListItemIcon -- 62.5 kB -- 19.6 kB
ListItemSecondaryAction -- 62.3 kB -- 19.5 kB
ListItemText -- 65.3 kB -- 20.5 kB
ListSubheader -- 63.1 kB -- 19.8 kB
Menu -- 89.1 kB -- 27.4 kB
MenuItem -- 78.6 kB -- 24.5 kB
MenuList -- 66.4 kB -- 20.8 kB
MobileStepper -- 68.2 kB -- 21.4 kB
Modal -- 14.5 kB -- 5.04 kB
NativeSelect -- 77.3 kB -- 24.4 kB
NoSsr -- 2.19 kB -- 1.04 kB
OutlinedInput -- 75 kB -- 23.4 kB
Pagination -- 85.6 kB -- 26.3 kB
PaginationItem -- 81.2 kB -- 25 kB
Paper -- 62.7 kB -- 19.6 kB
Popover -- 83.5 kB -- 25.8 kB
Popper -- 28.8 kB -- 10.3 kB
Portal -- 2.92 kB -- 1.3 kB
Radio -- 84.4 kB -- 26.6 kB
RadioGroup -- 64.8 kB -- 20.1 kB
Rating -- 70.8 kB -- 22.8 kB
RootRef -- 4.24 kB -- 1.64 kB
ScopedCssBaseline -- 63.2 kB -- 19.9 kB
Select -- 117 kB -- 34.7 kB
Skeleton -- 63.3 kB -- 20 kB
Slide -- 25.7 kB -- 8.75 kB
Slider -- 77 kB -- 24.2 kB
Snackbar -- 75.7 kB -- 23.7 kB
SnackbarContent -- 63.9 kB -- 20.1 kB
SpeedDial -- 86.7 kB -- 27.3 kB
SpeedDialIcon -- 64.9 kB -- 20.3 kB
Step -- 63 kB -- 19.8 kB
StepButton -- 82.8 kB -- 26.2 kB
StepConnector -- 63.1 kB -- 19.9 kB
StepContent -- 69.5 kB -- 21.8 kB
StepIcon -- 65 kB -- 20.3 kB
StepLabel -- 69 kB -- 21.7 kB
Stepper -- 65.2 kB -- 20.6 kB
styles/createMuiTheme -- 16.6 kB -- 5.85 kB
SvgIcon -- 63.4 kB -- 19.8 kB
SwipeableDrawer -- 92.6 kB -- 28.9 kB
Switch -- 82.6 kB -- 26 kB
Tab -- 76.7 kB -- 24.3 kB
Table -- 62.9 kB -- 19.7 kB
TableBody -- 62.4 kB -- 19.5 kB
TableCell -- 64.4 kB -- 20.3 kB
TableContainer -- 62.3 kB -- 19.5 kB
TableFooter -- 62.5 kB -- 19.5 kB
TableHead -- 62.4 kB -- 19.5 kB
TablePagination -- 144 kB -- 42 kB
TableRow -- 62.8 kB -- 19.7 kB
TableSortLabel -- 77.8 kB -- 24.4 kB
Tabs -- 85.8 kB -- 27.2 kB
TextareaAutosize -- 5.24 kB -- 2.18 kB
TextField -- 126 kB -- 36.7 kB
ToggleButton -- 76.6 kB -- 24.2 kB
ToggleButtonGroup -- 63.5 kB -- 20 kB
Toolbar -- 62.7 kB -- 19.7 kB
TreeItem -- 74.3 kB -- 23.5 kB
TreeView -- 67 kB -- 21.1 kB
Typography -- 64 kB -- 20 kB
useAutocomplete -- 14.7 kB -- 5.31 kB
useMediaQuery -- 2.58 kB -- 1.06 kB
Zoom -- 23.6 kB -- 8.12 kB

Generated by 🚫 dangerJS against 40497b8

@eps1lon eps1lon added the on hold There is a blocker, we need to wait label Feb 18, 2020
@eps1lon
Copy link
Member

eps1lon commented Feb 18, 2020

On hold until we agree on the behavior in #19765

@eps1lon eps1lon added the component: tooltip This is the name of the generic UI component, not the React module! label Feb 18, 2020
@oliviertassinari
Copy link
Member

If we all agree on the proposed solution in #19765 (comment), we could move forward.

@oliviertassinari oliviertassinari removed the on hold There is a blocker, we need to wait label Feb 20, 2020
@oliviertassinari oliviertassinari changed the title [Tooltip] Apply enterDelay on Component base [Tooltip] Improve open delay logic Feb 20, 2020
oliviertassinari
oliviertassinari approved these changes Feb 20, 2020
View reviewed changes
packages/material-ui/src/Tooltip/Tooltip.js
@@ -183,7 +183,8 @@ const Tooltip = React.forwardRef(function Tooltip(props, ref) {
disableFocusListener = false,
disableHoverListener = false,
disableTouchListener = false,
enterDelay = 0,
enterDelay = 200,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The spec seems fuzzy about this value. However, measuring from the videos of https://material.io/components/tooltips/#behavior, I come up with a value close to this.

It also matches a bit more experience on Gmail, Google Keep, and Google Calendar (I suspect they use a higher value, probably more like 300).

@oliviertassinari oliviertassinari added the new feature New feature or request label Feb 20, 2020
@eps1lon eps1lon changed the title [Tooltip] Improve open delay logic [Tooltip] Add enterNextDelay prop Feb 21, 2020
@oliviertassinari @mbrookes
Update packages/material-ui/src/Tooltip/Tooltip.js
40497b8 
Co-Authored-By: Matt <github@nospam.33m.co>
@oliviertassinari
Copy link
Member

oliviertassinari commented Feb 21, 2020 •
edited

I have benchmarked with a bunch of other UI libraries, a non 0 enter delay seems to be common (and value usually over 200ms), so using 200ms here seems like a solid change.
I think that the main value is about not displaying the tooltip when the mouse is only hovering an element to get to its destination (somewhere else).

@oliviertassinari oliviertassinari merged commit 670b858 into mui:master Feb 21, 2020
This was referenced Mar 10, 2020
Merged
Closed
Open
This was referenced Mar 21, 2020
Merged
Open
Closed
EsoterikStare pushed a commit to EsoterikStare/material-ui that referenced this pull request Mar 30, 2020
@Ritorna @EsoterikStare
[Tooltip] Add enterNextDelay prop (mui#19766)
634b1bb
This was referenced Apr 16, 2020
Merged
Closed
@snyk-bot snyk-bot mentioned this pull request May 4, 2020
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@mbrookes mbrookes mbrookes left review comments

@oliviertassinari oliviertassinari oliviertassinari approved these changes

@eps1lon eps1lon eps1lon approved these changes

Assignees
No one assigned
Labels
component: tooltip This is the name of the generic UI component, not the React module! new feature New feature or request
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

[Tooltip] Apply enterDelay on Component base
5 participants
@Ritorna @mui-pr-bot @eps1lon @oliviertassinari @mbrookes