diff --git a/packages/react/src/components/ChatHeader/ChatHeader.js b/packages/react/src/components/ChatHeader/ChatHeader.js
index 0ec1a8183..a70a1858a 100644
--- a/packages/react/src/components/ChatHeader/ChatHeader.js
+++ b/packages/react/src/components/ChatHeader/ChatHeader.js
@@ -354,7 +354,7 @@ const ChatHeader = ({
) : (
<>
-
+
{
setFullScreen((prev) => !prev);
diff --git a/packages/react/src/components/ChatInput/ChatInputFormattingToolbar.js b/packages/react/src/components/ChatInput/ChatInputFormattingToolbar.js
index f7ccf700f..46e17e55f 100644
--- a/packages/react/src/components/ChatInput/ChatInputFormattingToolbar.js
+++ b/packages/react/src/components/ChatInput/ChatInputFormattingToolbar.js
@@ -111,7 +111,7 @@ const ChatInputFormattingToolbar = ({ messageRef, inputRef }) => {
)}
{formatter.map((item, index) => (
-
+
{
))}
-
+
-
+
-
+
{' '}
setOpen(!isOpen)} />
diff --git a/packages/react/src/components/Message/MessageToolbox.js b/packages/react/src/components/Message/MessageToolbox.js
index 8826bc026..bb1823828 100644
--- a/packages/react/src/components/Message/MessageToolbox.js
+++ b/packages/react/src/components/Message/MessageToolbox.js
@@ -10,6 +10,7 @@ import { Modal } from '../Modal';
import { Icon } from '../Icon';
import { Button } from '../Button';
import { parseEmoji } from '../../lib/emoji';
+import { Tooltip } from '../Tooltip';
const MessageToolboxWrapperCss = css`
display: none;
@@ -88,13 +89,16 @@ export const MessageToolbox = ({
{...props}
>
{!isThreadMessage ? (
+
+
) : null}
+
handleStarMessage(message)}
- />
+ />
+
setEmojiOpen(true)}
/>
+
{!isThreadMessage && (
+
handlePinMessage(message)}
/>
+
)}
{message.u._id === authenticatedUserId && (
<>
+
handleEditMessage(message)}
/>
+
+
handleClickDelete(message)}
/>
+
)}
+
handlerReportMessage(message)}
/>
+
{showDeleteModal && (
diff --git a/packages/react/src/components/Tooltip/Tooltip.js b/packages/react/src/components/Tooltip/Tooltip.js
index f014ae9dc..19a4bac6d 100644
--- a/packages/react/src/components/Tooltip/Tooltip.js
+++ b/packages/react/src/components/Tooltip/Tooltip.js
@@ -1,19 +1,17 @@
import React, { useState } from 'react';
-const Tooltip = ({ children, text, position }) => {
+const Tooltip = ({ children, text, position, X, Y }) => {
const [isTooltipVisible, setTooltipVisible] = useState(false);
-
+ let touchTimer;
const tooltipStyle = {
position: 'absolute',
- left: '64%',
- transform: 'translateX(-50%) ',
- backgroundColor: 'rgba(97, 97, 97, 1)',
+ backgroundColor: 'black',
color: 'white',
- padding: '4px',
+ padding: '4.5px',
borderRadius: '3px',
- boxShadow: '0 2px 10px rgba(0, 0, 0, 0.2)',
- zIndex: 9999,
- fontSize: '12.5px',
+ boxShadow: '0 2px 10px rgba(0, 0, 0, 0.4)',
+ zIndex: 999,
+ fontSize: '13.8px',
whiteSpace: 'nowrap',
fontFamily: 'sans-serif',
};
@@ -21,39 +19,54 @@ const Tooltip = ({ children, text, position }) => {
const tooltipArrowStyle = {
content: '""',
position: 'absolute',
- left: '50%',
+ left:'50%',
marginLeft: '-5px',
borderWidth: '6px',
borderStyle: 'solid',
- borderColor: 'rgba(97, 97, 97, 1) transparent transparent transparent',
+ borderColor: 'black transparent transparent transparent',
+ zIndex: 999,
};
- // Add more positions according to your needs and modify tooltipStyle and tooltipArrowStyle accordingly
+ const Adjust = (A, B) => {
+ let AB = '';
+ if (A != null) {
+ AB = `${AB}translateX(${A})`;
+ tooltipStyle.transform = AB;
+ }
+ if (B != null) {
+ AB = `${AB}translateY(${B})`;
+ tooltipStyle.transform = AB;
+ }
+ };
+ // Add more positions according to your needs and modify tooltipStyle and tooltipArrowStyle accordingly
if (position === 'top') {
tooltipStyle.top = '-100%';
tooltipArrowStyle.top = '100%';
- tooltipArrowStyle.transform = 'translateX(-50%)';
+ Adjust(X, Y);
} else if (position === 'bottom') {
tooltipStyle.top = '100%';
+ tooltipStyle.transform = 'translateY(45%) translateX(-55%)';
tooltipArrowStyle.bottom = '100%';
- tooltipArrowStyle.transform = 'translateX(-50%) rotate(180deg)';
+ tooltipArrowStyle.transform = 'rotate(180deg)';
+ Adjust(X, Y);
}
const handleMouseEnter = () => {
- setTooltipVisible(true);
+ touchTimer = setTimeout(() => {
+ setTooltipVisible(true);
+ }, 300);
};
const handleMouseLeave = () => {
+ clearTimeout(touchTimer);
setTooltipVisible(false);
};
- let touchTimer;
-
const handleTouchStart = () => {
touchTimer = setTimeout(() => {
setTooltipVisible(true);
- }, 500);
+ }, 400);
};
const handleTouchEnd = () => {