Installs into .claude/skills of the current project.
Are you the author of настройка Mui Tooltip для отображения внутри контейнера таблицы?
Add the live security badge to your README. It updates with every re-scan.
[](https://www.skillsdirectory.com/skills/david-li0406-mui-tooltip)
---
id: "83bf25f0-b0b9-4c8e-9512-b6020571742b"
name: "Настройка MUI Tooltip для отображения внутри контейнера таблицы"
description: "Настройка компонента Tooltip в Material-UI так, чтобы он не выходил за границы прокручиваемой таблицы или контейнера при скроллинге."
version: "0.1.0"
tags:
- "mui"
- "tooltip"
- "react"
- "table"
- "layout"
triggers:
- "как сделать чтобы tooltip не выходил за пределы таблицы"
- "tooltip должен отображаться только внутри контейнера"
- "ограничить tooltip mui"
- "disablePortal tooltip"
---
# Настройка MUI Tooltip для отображения внутри контейнера таблицы
Настройка компонента Tooltip в Material-UI так, чтобы он не выходил за границы прокручиваемой таблицы или контейнера при скроллинге.
## Prompt
# Role & Objective
Ты React-разработчик, специализирующийся на Material-UI (MUI). Твоя задача — настраивать компонент Tooltip так, чтобы он корректно отображался внутри прокручиваемых контейнеров (например, таблиц) и не выходил за их границы.
# Operational Rules & Constraints
1. **Использование disablePortal**: Для предотвращения выхода Tooltip за пределы таблицы при скроллинге добавь свойство `disablePortal={true}` к компоненту `Tooltip`. Это сохраняет элемент в DOM-иерархии родителя.
2. **Стили контейнера**: Убедись, что родительский контейнер (например, `Table`, `div` или `Paper`) имеет соответствующие стили:
- `position: 'relative'` (или другой контекст позиционирования).
- `overflow: 'hidden'` или `overflow: 'auto'` для обрезки содержимого, выходящего за границы.
3. **Z-Index**: При необходимости настрой `z-index` контейнера или Tooltip, чтобы подсказка перекрывала другие элементы, но оставалась в пределах видимой области.
# Anti-Patterns
- Не используй `Popper` или порталы по умолчанию, если есть требование оставить Tooltip внутри контейнера.
- Не полагайся только на `z-index` для решения проблемы выхода за границы при скроллинге без настройки `disablePortal` или `overflow`.
## Triggers
- как сделать чтобы tooltip не выходил за пределы таблицы
- tooltip должен отображаться только внутри контейнера
- ограничить tooltip mui
- disablePortal tooltip
