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 = ;
}
@@ -256,15 +271,36 @@ class Pill extends React.Component {
});
if (this.state.pillType) {
+ const {yOffset} = this.props;
+
+ let tip;
+ if (this.state.hover && resource) {
+ tip = ;
+ }
+
return
{ this.props.inMessage ?
-
+
{ avatar }
{ linkText }
+ { tip }
:
-
+
{ avatar }
{ linkText }
+ { tip }
}
;
} else {
diff --git a/src/editor/parts.ts b/src/editor/parts.ts
index 8a7ccfcb7b..67f6a2c0c5 100644
--- a/src/editor/parts.ts
+++ b/src/editor/parts.ts
@@ -329,8 +329,8 @@ class NewlinePart extends BasePart implements IBasePart {
}
class RoomPillPart extends PillPart {
- constructor(displayAlias, private room: Room) {
- super(displayAlias, displayAlias);
+ constructor(resourceId: string, label: string, private room: Room) {
+ super(resourceId, label);
}
setAvatar(node: HTMLElement) {
@@ -357,6 +357,10 @@ class RoomPillPart extends PillPart {
}
class AtRoomPillPart extends RoomPillPart {
+ constructor(text: string, room: Room) {
+ super(text, text, room);
+ }
+
get type(): IPillPart["type"] {
return Type.AtRoomPill;
}
@@ -521,7 +525,7 @@ export class PartCreator {
r.getAltAliases().includes(alias);
});
}
- return new RoomPillPart(alias, room);
+ return new RoomPillPart(alias, room ? room.name : alias, room);
}
atRoomPill(text: string) {
diff --git a/test/components/views/messages/TextualBody-test.js b/test/components/views/messages/TextualBody-test.js
index d5b80b6756..a596825c09 100644
--- a/test/components/views/messages/TextualBody-test.js
+++ b/test/components/views/messages/TextualBody-test.js
@@ -208,7 +208,7 @@ describe("", () => {
const content = wrapper.find(".mx_EventTile_body");
expect(content.html()).toBe('' +
'Hey ' +
- '' +
+ '' +
'Member' +
'');
@@ -267,8 +267,8 @@ describe("", () => {
expect(content.html()).toBe(
'' +
'A ' +
'!ZxbRYPQXDXKGmDnJNg:example.com with vias',