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.

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

[docs] Tidy up Tooltips demos #9755

Merged
merged 2 commits into from
Jan 5, 2018
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions docs/src/pages/demos/tooltips/ControlledTooltips.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,11 @@ class ControlledTooltips extends React.Component {
open: false,
};

handleIconButtonClose = () => {
handleTooltipClose = () => {
this.setState({ open: false });
};

handleIconButtonOpen = () => {
handleTooltipOpen = () => {
this.setState({ open: true });
};

Expand All @@ -21,10 +21,10 @@ class ControlledTooltips extends React.Component {
<Tooltip
id="tooltip-controlled"
title="Delete"
onClose={this.handleIconButtonClose}
onClose={this.handleTooltipClose}
enterDelay={300}
leaveDelay={300}
onOpen={this.handleIconButtonOpen}
onOpen={this.handleTooltipOpen}
open={this.state.open}
placement="bottom"
>
Expand Down
13 changes: 5 additions & 8 deletions docs/src/pages/demos/tooltips/SimpleTooltips.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,39 +5,36 @@ import AddIcon from 'material-ui-icons/Add';
import Button from 'material-ui/Button';
import DeleteIcon from 'material-ui-icons/Delete';
import IconButton from 'material-ui/IconButton';
import Typography from 'material-ui/Typography';
import Tooltip from 'material-ui/Tooltip';

const styles = theme => ({
fab: {
margin: theme.spacing.unit * 2,
},
absolute: {
flip: false,
position: 'absolute',
bottom: 32,
right: 32,
bottom: theme.spacing.unit * 2,
right: theme.spacing.unit * 3,
},
});

function SimpleTooltips(props) {
const { classes } = props;
return (
<div>
<Tooltip id="tooltip-icon" title="Delete" placement="bottom">
<Tooltip id="tooltip-icon" title="Delete">
<IconButton aria-label="Delete">
<DeleteIcon />
</IconButton>
</Tooltip>
<Tooltip id="tooltip-fab" className={classes.fab} title="Add" placement="bottom">
<Tooltip id="tooltip-fab" className={classes.fab} title="Add">
<Button fab color="primary" aria-label="Add">
<AddIcon />
</Button>
</Tooltip>
<br />
<br />
<Typography>The fab on the right is absolutely positioned:</Typography>
<Tooltip placement="bottom" title="Position absolute">
<Tooltip title="FAB 'position: absolute;'">
<Button fab color="accent" className={props.classes.absolute}>
<AddIcon />
</Button>
Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/demos/tooltips/tooltips.md
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,6 @@ They don’t have directional arrows; instead, they rely on motion emanating fro

## Showing and hiding

The tooltip is immediately shown when the user's mouse hovers over the element and immediately hides when the user's mouse leaves. A delay in showing or hiding the tooltip can be added through the properties `enterDelay` and `leaveDelay`.
The tooltip is normally shown immediately when the user's mouse hovers over the element, and hides immediately when the user's mouse leaves. A delay in showing or hiding the tooltip can be added through the properties `enterDelay` and `leaveDelay`, as shown in the Controlled Tooltips demo above.

On mobile, the tooltip is displayed when the user longpresses the element and hides after a delay of 1500ms. You can disable this feature with the `disableTriggerTouch` property.