@@ -4,10 +4,53 @@
 	cursor: pointer;
 }
 
+.messageContent {
+	&::selection,
+	& *::selection {
+		background-color: rgba(127, 125, 243, 0.35);
+		color: inherit;
+	}
+}
+
+.selectionTooltipPopper {
+	&[data-popper-placement*='top'] .selectionTooltipArrow {
+		bottom: 0;
+		left: 0;
+		margin-bottom: -5px;
+	}
+
+	&[data-popper-placement*='bottom'] .selectionTooltipArrow {
+		top: 0;
+		left: 0;
+		margin-top: -5px;
+	}
+}
+
 .selectionTooltip {
+	position: relative;
 	display: flex;
 	align-items: center;
 	gap: 8px;
+	padding: 10px 13px;
+	background: #4b4b4b;
+	border-radius: 10px;
+	box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.04), 0px 4px 32px rgba(0, 0, 0, 0.16);
+}
+
+.selectionTooltipArrow {
+	position: absolute;
+	width: 10px;
+	height: 10px;
+	pointer-events: none;
+
+	&::before {
+		content: '';
+		display: block;
+		width: 100%;
+		height: 100%;
+		background: #4b4b4b;
+		transform: rotate(45deg);
+	}
 }
 
 .selectionTooltipButton {
@@ -1,5 +1,5 @@
-import React, { useCallback, useEffect, useRef } from 'react'
-import { Box, Menu, MenuItem, Typography } from '@mui/material'
+import React, { useCallback, useEffect, useMemo, useRef } from 'react'
+import { Box, ClickAwayListener, Menu, MenuItem, Popper, Typography } from '@mui/material'
 import Stack from '@mui/material/Stack'
 import Image from 'next/image'
 
@@ -13,8 +13,31 @@ import { FullscreenIcon } from '../icons/fullscreen-icon'
 import { FullscreenMessageModal } from '../fullscreen-message-modal/fullscreen-message-modal'
 import { ThinkBlock } from '../think-block/think-block'
 
+type SelectionRect = {
+	top: number
+	left: number
+	width: number
+	height: number
+	bottom: number
+	right: number
+}
+
 type SelectionTooltipState = {
 	text: string
+	rect: SelectionRect
+}
+
+const SELECTION_TOOLTIP_Z_INDEX = 10050
+
+function toSelectionRect(rect: DOMRect): SelectionRect {
+	return {
+		top: rect.top,
+		left: rect.left,
+		width: rect.width,
+		height: rect.height,
+		bottom: rect.bottom,
+		right: rect.right,
+	}
 }
 
 export function BotMessage(props: any) {
@@ -24,6 +47,7 @@ export function BotMessage(props: any) {
 	const [fullscreenModalOpen, setFullscreenModalOpen] = React.useState(false)
 	const [selectionTooltip, setSelectionTooltip] = React.useState<SelectionTooltipState | null>(null)
 	const contentRef = useRef<HTMLDivElement | null>(null)
+	const [selectionArrowEl, setSelectionArrowEl] = React.useState<HTMLElement | null>(null)
 	const ignoreClickAwayRef = useRef(false)
 
 	const copy = (text: string) => {
@@ -60,9 +84,25 @@ export function BotMessage(props: any) {
 			return null
 		}
 
-		return { text }
+		const rect = range.getBoundingClientRect()
+		if (!rect.width && !rect.height) {
+			return null
+		}
+
+		return { text, rect: toSelectionRect(rect) }
 	}, [])
 
+	const selectionVirtualAnchor = useMemo(() => {
+		if (!selectionTooltip) {
+			return null
+		}
+		const { rect } = selectionTooltip
+		return {
+			getBoundingClientRect: () => new DOMRect(rect.left, rect.top, rect.width, rect.height),
+			contextElement: contentRef.current ?? undefined,
+		}
+	}, [selectionTooltip])
+
 	const showSelectionTooltip = useCallback(() => {
 		const next = getSelectionInsideContent()
 		if (next) {
@@ -247,101 +287,128 @@ export function BotMessage(props: any) {
 					</Stack>
 					<Box display='flex' width='100%' minWidth={0}>
 						<Box flex={1} minWidth={0}>
-							<TooltipCustom
-								open={Boolean(selectionTooltip)}
-								onClose={clearSelectionTooltip}
-								placement='top'
-								fullWidthTrigger
-								wrapperWidth='100%'
-								maxWidth='none'
-								offset={[0, -8]}
-								title={
-									selectionTooltip ? (
-										<div className={styles.selectionTooltip}>
-											<button
-												type='button'
-												className={styles.selectionTooltipButton}
-												onMouseDown={(e) => e.preventDefault()}
-												onClick={handleAskSelection}
-											>
-												Спросить чат-бота
-											</button>
-											<span className={styles.selectionTooltipDivider} />
-											<button
-												type='button'
-												className={styles.selectionTooltipButton}
-												onMouseDown={(e) => e.preventDefault()}
-												onClick={handleCopySelection}
-											>
-												Копировать
-											</button>
-										</div>
-									) : (
-										''
-									)
-								}
+							<Box
+								ref={contentRef}
+								onMouseUp={handleContentMouseUp}
+								onTouchEnd={handleContentTouchEnd}
+								onClick={() => {
+									if (props.message.file) {
+										window.open(props.message.file, '_blank')
+									}
+								}}
+								className={`${styles.messageContent} smallScroll`}
+								sx={{
+									width: '100%',
+									minWidth: 0,
+									overflowY: 'auto',
+									overflowX: 'hidden',
+									position: 'relative',
+									padding: '0px 16px',
+									border: `1px solid #303035`,
+									color: '#f9fafb',
+									boxShadow: 'none',
+									lineHeight: '22.5px',
+									fontSize: '15px',
+									textAlign: 'left',
+									fontFamily: 'Inter,sans-serif',
+									borderRadius: '13px',
+									...flexStyle,
+								}}
 							>
-								<Box
-									ref={contentRef}
-									onMouseUp={handleContentMouseUp}
-									onTouchEnd={handleContentTouchEnd}
-									onClick={() => {
-										if (props.message.file) {
-											window.open(props.message.file, '_blank')
-										}
-									}}
-									className='smallScroll'
-									sx={{
-										width: '100%',
-										minWidth: 0,
-										overflowY: 'auto',
-										overflowX: 'hidden',
-										position: 'relative',
-										padding: '0px 16px',
-										border: `1px solid #303035`,
-										color: '#f9fafb',
-										boxShadow: 'none',
-										lineHeight: '22.5px',
-										fontSize: '15px',
-										textAlign: 'left',
-										fontFamily: 'Inter,sans-serif',
-										borderRadius: '13px',
-										...flexStyle,
-									}}
-								>
-							{props.message.file ? (
-								<svg width='16' height='18' viewBox='0 0 15 19' fill='none' xmlns='http://www.w3.org/2000/svg'>
-									<path
-										fillRule='evenodd'
-										clipRule='evenodd'
-										d='M10.3286 0.578662C9.95416 0.20795 9.44851 0 8.92158 0H2C0.895433 0 0 0.895431 0 2V17C0 18.1046 0.895431 19 2 19H13C14.1046 19 15 18.1046 15 17V6.03743C15 5.50349 14.7865 4.99173 14.4071 4.61609L10.3286 0.578662ZM10.0669 5.37846C9.79079 5.37846 9.56693 5.1546 9.56693 4.87846V2.19238C9.56693 1.74815 10.103 1.52452 10.4187 1.83705L13.132 4.52313C13.4495 4.83737 13.227 5.37846 12.7803 5.37846H11.7815H10.0669Z'
-										fill='#7f7df3'
-									/>
-								</svg>
-							) : (
-								''
-							)}
-							{props.message.file ? (
-								<Markdown content={rawContent} streaming={props.isStreaming} />
-							) : (
-								<>
-									{thinkContents.map((thinkContent, index) => (
-										<ThinkBlock
-											key={`${props.message.uid}-think-${index}`}
-											content={thinkContent}
-											streaming={Boolean(props.isStreaming && index === thinkContents.length - 1)}
-										/>
-									))}
-									{displayMainContent ? (
-										<Markdown
-											content={displayMainContent}
-											streaming={props.isStreaming && !isThinkStreaming && !parsedThink.hasIncompleteThink}
+								{props.message.file ? (
+									<svg width='16' height='18' viewBox='0 0 15 19' fill='none' xmlns='http://www.w3.org/2000/svg'>
+										<path
+											fillRule='evenodd'
+											clipRule='evenodd'
+											d='M10.3286 0.578662C9.95416 0.20795 9.44851 0 8.92158 0H2C0.895433 0 0 0.895431 0 2V17C0 18.1046 0.895431 19 2 19H13C14.1046 19 15 18.1046 15 17V6.03743C15 5.50349 14.7865 4.99173 14.4071 4.61609L10.3286 0.578662ZM10.0669 5.37846C9.79079 5.37846 9.56693 5.1546 9.56693 4.87846V2.19238C9.56693 1.74815 10.103 1.52452 10.4187 1.83705L13.132 4.52313C13.4495 4.83737 13.227 5.37846 12.7803 5.37846H11.7815H10.0669Z'
+											fill='#7f7df3'
 										/>
-									) : null}
-								</>
-							)}
-								</Box>
-							</TooltipCustom>
+									</svg>
+								) : (
+									''
+								)}
+								{props.message.file ? (
+									<Markdown content={rawContent} streaming={props.isStreaming} />
+								) : (
+									<>
+										{thinkContents.map((thinkContent, index) => (
+											<ThinkBlock
+												key={`${props.message.uid}-think-${index}`}
+												content={thinkContent}
+												streaming={Boolean(props.isStreaming && index === thinkContents.length - 1)}
+											/>
+										))}
+										{displayMainContent ? (
+											<Markdown
+												content={displayMainContent}
+												streaming={props.isStreaming && !isThinkStreaming && !parsedThink.hasIncompleteThink}
+											/>
+										) : null}
+									</>
+								)}
+							</Box>
+							{selectionVirtualAnchor ? (
+								<Popper
+									open
+									anchorEl={selectionVirtualAnchor}
+									placement='top'
+									className={styles.selectionTooltipPopper}
+									modifiers={[
+										{
+											name: 'offset',
+											options: {
+												// Чуть выше выделения + место под стрелку
+												offset: [0, 12],
+											},
+										},
+										{
+											name: 'arrow',
+											enabled: Boolean(selectionArrowEl),
+											options: {
+												element: selectionArrowEl,
+												padding: 8,
+											},
+										},
+										{
+											name: 'preventOverflow',
+											options: {
+												padding: 8,
+											},
+										},
+									]}
+									sx={{ zIndex: SELECTION_TOOLTIP_Z_INDEX }}
+								>
+									<div>
+										<ClickAwayListener
+											onClickAway={clearSelectionTooltip}
+											mouseEvent='onMouseUp'
+											touchEvent='onTouchEnd'
+										>
+											<div
+												className={styles.selectionTooltip}
+												onMouseDown={(e) => e.preventDefault()}
+											>
+												<button
+													type='button'
+													className={styles.selectionTooltipButton}
+													onClick={handleAskSelection}
+												>
+													Ответить
+												</button>
+												<span className={styles.selectionTooltipDivider} />
+												<button
+													type='button'
+													className={styles.selectionTooltipButton}
+													onClick={handleCopySelection}
+												>
+													Копировать
+												</button>
+												<span ref={setSelectionArrowEl} className={styles.selectionTooltipArrow} />
+											</div>
+										</ClickAwayListener>
+									</div>
+								</Popper>
+							) : null}
 						</Box>
 						<Box marginLeft={1} flexShrink={0}>
 							<Box