Add tooltip for format buttons

pull/21833/head
Bruno Windels 2019-09-05 13:22:42 +02:00
parent da29057fd8
commit b4b9c7d072
2 changed files with 20 additions and 5 deletions

View File

@ -79,3 +79,9 @@ limitations under the License.
mask-image: url('$(res)/img/format/code.svg'); mask-image: url('$(res)/img/format/code.svg');
} }
} }
.mx_MessageComposerFormatBar_buttonTooltip {
white-space: nowrap;
font-size: 12px;
font-weight: 600;
}

View File

@ -17,6 +17,8 @@ limitations under the License.
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { _t } from '../../../languageHandler'; import { _t } from '../../../languageHandler';
import sdk from '../../../index';
export default class MessageComposerFormatBar extends React.PureComponent { export default class MessageComposerFormatBar extends React.PureComponent {
static propTypes = { static propTypes = {
@ -67,13 +69,20 @@ class FormatButton extends React.PureComponent {
} }
render() { render() {
const InteractiveTooltip = sdk.getComponent('elements.InteractiveTooltip');
const className = `mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIcon${this.props.icon}`; const className = `mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIcon${this.props.icon}`;
const tooltipContent = (
<div className="mx_MessageComposerFormatBar_buttonTooltip">{this.props.label}</div>
);
return ( return (
<span aria-label={this.props.label} <InteractiveTooltip content={tooltipContent}>
role="button" <span aria-label={this.props.label}
onClick={this.props.onClick} role="button"
className={className}> onClick={this.props.onClick}
</span> className={className}>
</span>
</InteractiveTooltip>
); );
} }
} }