diff --git a/src/components/views/elements/Pill.js b/src/components/views/elements/Pill.js index cbbe562754..5b3189f389 100644 --- a/src/components/views/elements/Pill.js +++ b/src/components/views/elements/Pill.js @@ -26,6 +26,7 @@ import FlairStore from "../../../stores/FlairStore"; import {getPrimaryPermalinkEntity, parseAppLocalLink} from "../../../utils/permalinks/Permalinks"; import MatrixClientContext from "../../../contexts/MatrixClientContext"; import {Action} from "../../../dispatcher/actions"; +import Tooltip from './Tooltip'; class Pill extends React.Component { static roomNotifPos(text) { @@ -68,6 +69,8 @@ class Pill extends React.Component { group: null, // The room related to the room pill room: null, + // Is the user hovering the pill + hover: false, }; // TODO: [REACT-WARNING] Replace with appropriate lifecycle event @@ -154,6 +157,18 @@ class Pill extends React.Component { this._unmounted = true; } + onMouseOver = () => { + this.setState({ + hover: true, + }); + }; + + onMouseLeave = () => { + this.setState({ + hover: false, + }); + }; + doProfileLookup(userId, member) { MatrixClientPeg.get().getProfileInfo(userId).then((resp) => { if (this._unmounted) { @@ -256,16 +271,36 @@ class Pill extends React.Component { }); if (this.state.pillType) { + const {yOffset} = this.props; + + let tip; + if (this.state.hover) { + tip = ; + } + return { this.props.inMessage ? - + { avatar } { linkText } : - + { avatar } { linkText } } + {tip} ; } else { // Deliberately render nothing if the URL isn't recognised