diff --git a/res/css/views/rooms/_MessageComposerFormatBar.scss b/res/css/views/rooms/_MessageComposerFormatBar.scss index 2e74076e2a..c8ca218b13 100644 --- a/res/css/views/rooms/_MessageComposerFormatBar.scss +++ b/res/css/views/rooms/_MessageComposerFormatBar.scss @@ -79,3 +79,9 @@ limitations under the License. mask-image: url('$(res)/img/format/code.svg'); } } + +.mx_MessageComposerFormatBar_buttonTooltip { + white-space: nowrap; + font-size: 12px; + font-weight: 600; +} diff --git a/src/components/views/rooms/MessageComposerFormatBar.js b/src/components/views/rooms/MessageComposerFormatBar.js index cc3f341653..154c8b0d31 100644 --- a/src/components/views/rooms/MessageComposerFormatBar.js +++ b/src/components/views/rooms/MessageComposerFormatBar.js @@ -17,6 +17,8 @@ limitations under the License. import React from 'react'; import PropTypes from 'prop-types'; import { _t } from '../../../languageHandler'; +import sdk from '../../../index'; + export default class MessageComposerFormatBar extends React.PureComponent { static propTypes = { @@ -67,13 +69,20 @@ class FormatButton extends React.PureComponent { } render() { + const InteractiveTooltip = sdk.getComponent('elements.InteractiveTooltip'); const className = `mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIcon${this.props.icon}`; + const tooltipContent = ( +