diff --git a/src/components/views/elements/Pill.js b/src/components/views/elements/Pill.js index daa4cb70e2..c6806c289e 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) { @@ -226,7 +241,7 @@ class Pill extends React.Component { case Pill.TYPE_ROOM_MENTION: { const room = this.state.room; if (room) { - linkText = resource; + linkText = room.name || resource; if (this.props.shouldShowPillAvatar) { avatar =