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