Merge pull request #1755 from pablolmiranda/fixes-tooltip-for-button
Tooltip for disabled buttonold
commit
2a6b62cd81
|
@ -101,6 +101,10 @@ const factory = (ripple, FontIcon) => {
|
||||||
const element = href ? 'a' : 'button';
|
const element = href ? 'a' : 'button';
|
||||||
const level = this.getLevel();
|
const level = this.getLevel();
|
||||||
const shape = this.getShape();
|
const shape = this.getShape();
|
||||||
|
const mouseEvents = {
|
||||||
|
onMouseUp: this.handleMouseUp,
|
||||||
|
onMouseLeave: this.handleMouseLeave,
|
||||||
|
};
|
||||||
|
|
||||||
const classes = classnames(theme.button, [theme[shape]], {
|
const classes = classnames(theme.button, [theme[shape]], {
|
||||||
[theme[level]]: neutral,
|
[theme[level]]: neutral,
|
||||||
|
@ -110,21 +114,24 @@ const factory = (ripple, FontIcon) => {
|
||||||
|
|
||||||
const props = {
|
const props = {
|
||||||
...others,
|
...others,
|
||||||
|
...mouseEvents,
|
||||||
href,
|
href,
|
||||||
ref: (node) => { this.buttonNode = node; },
|
ref: (node) => { this.buttonNode = node; },
|
||||||
className: classes,
|
className: classes,
|
||||||
disabled: this.props.disabled,
|
disabled: this.props.disabled,
|
||||||
onMouseUp: this.handleMouseUp,
|
|
||||||
onMouseLeave: this.handleMouseLeave,
|
|
||||||
type: !href ? type : null,
|
type: !href ? type : null,
|
||||||
'data-react-toolbox': 'button',
|
'data-react-toolbox': 'button',
|
||||||
};
|
};
|
||||||
|
|
||||||
return React.createElement(element, props,
|
const buttonElement = React.createElement(element, props,
|
||||||
icon ? <FontIcon className={theme.icon} value={icon} /> : null,
|
icon ? <FontIcon className={theme.icon} value={icon} /> : null,
|
||||||
label,
|
label,
|
||||||
children,
|
children,
|
||||||
);
|
);
|
||||||
|
|
||||||
|
return others.onMouseEnter && this.props.disabled
|
||||||
|
? <span {...mouseEvents}>{buttonElement}</span>
|
||||||
|
: buttonElement;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -20,6 +20,7 @@ const TooltipTest = () => (
|
||||||
<section>
|
<section>
|
||||||
<h5>Tooltip</h5>
|
<h5>Tooltip</h5>
|
||||||
<p>Give information on :hover</p>
|
<p>Give information on :hover</p>
|
||||||
|
<TooltipButton label="Bookmark" icon="bookmark" raised primary disabled={true} tooltip="Bookmark Tooltip" tooltipDelay={1000} />
|
||||||
<TooltipButton label="Bookmark" icon="bookmark" raised primary tooltip="Bookmark Tooltip" tooltipDelay={1000} />
|
<TooltipButton label="Bookmark" icon="bookmark" raised primary tooltip="Bookmark Tooltip" tooltipDelay={1000} />
|
||||||
<TooltipButton icon="add" floating accent tooltip="Floating Tooltip" />
|
<TooltipButton icon="add" floating accent tooltip="Floating Tooltip" />
|
||||||
<TooltipButton icon="add" floating disabled tooltip="Floating can not be shown" />
|
<TooltipButton icon="add" floating disabled tooltip="Floating can not be shown" />
|
||||||
|
|
Loading…
Reference in New Issue