koobiq · lskramarov · Mar 19, 2026 · Mar 13, 2026 · Mar 16, 2026 · Mar 17, 2026
@@ -19,40 +19,43 @@ import { DevThemeToggle } from '../theme-toggle';
     selector: 'dev-examples',
     imports: [TooltipExamplesModule],
     template: `
-        <tooltip-dynamic-example />
+        <tooltip-overview-example />
         <br />
         <br />
-        <tooltip-overview-example />
+        <tooltip-width-example />
         <br />
         <br />
-        <tooltip-hide-with-timeout-example />
+        <tooltip-wide-width-example />
         <br />
         <br />
-        <tooltip-arrow-and-offset-example />
+        <tooltip-style-example />
         <br />
         <br />
-        <tooltip-extended-example />
+        <tooltip-arrow-example />
         <br />
         <br />
-        <tooltip-hide-with-timeout-example />
+        <tooltip-placements-example />
         <br />
         <br />
-        <tooltip-long-example />
+        <tooltip-relative-to-pointer-example />
         <br />
         <br />
-        <tooltip-multiple-lines-example />
+        <tooltip-offset-example />
         <br />
         <br />
-        <tooltip-placement-center-example />
+        <tooltip-hide-with-timeout-example />
         <br />
         <br />
-        <tooltip-placement-edges-example />
+        <tooltip-disabled-example />
         <br />
         <br />
-        <tooltip-relative-to-pointer-example />
+        <tooltip-extended-example />
         <br />
         <br />
-        <tooltip-style-example />
+        <tooltip-dynamic-example />
+        <br />
+        <br />
+        <tooltip-interactive-example />
     `,
     changeDetection: ChangeDetectionStrategy.OnPush
 })

@@ -2,7 +2,7 @@
 
 In this example, the tooltip hides with a delay and stays open if the user moves the cursor from the trigger to the tooltip in time.
 
-<!-- example(tooltip-hide-with-timeout) -->
+<!-- example(tooltip-interactive) -->
 
 #### Dynamic Tooltip
 

@@ -2,7 +2,7 @@
 
 В данном примере Tooltip скрывается с задержкой и остается открытым если пользователь успеет переместить курсор с триггера на Tooltip.
 
-<!-- example(tooltip-hide-with-timeout) -->
+<!-- example(tooltip-interactive) -->
 
 #### Динамический Tooltip
 

@@ -1,138 +1,80 @@
-A tooltip is a hint that appears when hovering over or focusing on an interface element.
-A tooltip cannot contain interactive elements.
+Tooltip — a hint that appears on hover or focus. The tooltip closes when the cursor is moved away, focus is removed, or the page is scrolled.
 
-### When to use
-
-- For short explanatory text about interface elements.
-- To display labels for icons that have no adjacent text.
-- If text does not fit in the allocated space and is truncated with an ellipsis (for example, in table columns). In this case, the tooltip displays the full text.
-- To show a hint with headings, lists, tables, etc.
-
-### Component structure
-
-#### Variations
-
-A custom tooltip is always preferable to a system one. Do not use both system and custom tooltips in the same interface.
-
-##### Simple
-
-- Tooltip body with text
-- Arrow pointer
-
-The tooltip width depends on the content; maximum is 300 pixels.
-
-The tooltip height depends on the content.
-
-The tooltip text should remain very brief — ideally no more than 70 characters.
-
-<div style="margin-top: 15px;">
-    <img src="./assets/images/tooltip/tooltip__structure.png" alt="tooltip structure" style="max-width: 240px"/>
-</div>
-
-<br>
-
-A tooltip can span more than one line:
-
-<!-- example(tooltip-multiple-lines) -->
-
-Sometimes it is more convenient for the tooltip text not to wrap but to be written in a single line — for example, when comparing hash sums, displaying email addresses, or file paths. For such cases, the maximum tooltip width can be left unset:
-
-<!-- example(tooltip-long) -->
-
-##### Extended
-
-- Tooltip body
-- Arrow pointer
-- Header (optional)
-
-Do not use interactive elements (buttons, links, etc.) in an extended tooltip — they are generally unusable. If interactive elements are needed, use a [popover](/en/components/popover).
-
-<div style="margin-top: 5px;">
-    <img src="./assets/images/tooltip/tooltip-hard__structure.jpg" alt="tooltip hard structure"/>
-</div>
+<!-- example(tooltip-overview) -->
 
-##### Sizes
+### Width
 
-Unlike a simple tooltip, an extended tooltip has a fixed width. To make optimal use of space, it is useful to design several width variants.
+The tooltip size is determined by its content, but the component width cannot exceed 300px.
 
-The tooltip height depends on the content. The recommended maximum height is 480px (may be increased at the designer's discretion).
+<!-- example(tooltip-width) -->
 
-### How it works
+Sometimes it's more convenient if the text in the tooltip doesn't wrap and is displayed on a single line. For example, when comparing checksums, outputting email addresses, or file and folder paths. For such cases, don't limit the tooltip width.
 
-#### How to open
+<!-- example(tooltip-wide-width) -->
 
-- Hover over the trigger element
-- Focus
+#### Style
 
-#### How to close
+<!-- example(tooltip-style) -->
 
-- Move the pointer away from the trigger element
-- Remove focus
-- Scroll the page
-- Press Esc
+#### Arrow
 
-#### Delay
+Add a pointer arrow when it can be confusing which element the hint relates to.
 
-- When hovering over an element, the tooltip appears with a 0.4 second delay.
-- When switching focus or hovering over another element with a tooltip, the delay works as follows:
-    - the first tooltip appears with a 0.4 second delay,
-    - subsequent tooltips appear instantly,
-    - if the tooltip from the previous element has disappeared and more than 2 seconds have passed, the 0.4 second delay applies again.
-- The tooltip disappears instantly.
+<!-- example(tooltip-arrow) -->
 
-### Alignment
+### Positioning
 
-Consider the context in which the tooltip appears. Configure the alignment so that the tooltip does not obscure important content.
+#### Relative to Element
 
-#### Centered on the element
+In normal circumstances, the tooltip opens at the top centered. The position near the trigger element can be adjusted manually.
 
-The arrow is positioned at the center of the tooltip and points to the center of the trigger element.
+Choose a position where the tooltip won't cover content that the user will interact with next. For example, in a vertical list, open tooltips to the side so the hint doesn't interfere with viewing the neighboring element in the reading direction.
 
-<!-- example(tooltip-placement-center) -->
+<!-- example(tooltip-placements) -->
 
-#### At the edge of the element
+#### Position Priority
 
-The edge of the tooltip aligns with the edge of the trigger element; the arrow is at a fixed distance from the tooltip edge.
-If the element is too small, the arrow aligns with the center of the element.
+If there isn't enough space to display the tooltip, it will open on the opposite side. The kbqPlacementPriority attribute helps configure fallback positions if they need to differ from the default order.
 
-<!-- example(tooltip-placement-edges) -->
+#### Near the Cursor
 
-#### Relative to the cursor
+When configuring kbqRelativeToPointer="true", the tooltip is positioned relative to the cursor. This is often needed for long strings (checksums, email, paths) so the hint appears right at the cursor.
 
 <!-- example(tooltip-relative-to-pointer) -->
 
-**Dynamic alignment**
+### Offset
 
-If there is not enough space for the tooltip, it will attempt to move to another position. For example, from "bottom center" to "top center".
+<!-- example(tooltip-offset) -->
 
-### Tooltip styling
+### Delay
 
-#### Simple tooltip
+When hovering over an element, the tooltip appears with a 0.4 second delay and disappears instantly.
 
-For the light theme, a dark tooltip is used. For the dark theme, a light tooltip is used.
+When switching focus or hovering over another element with a tooltip, the delay works as follows:
 
-A separate tooltip type is used for warnings. For example, it appears when the user tries to enter a forbidden character in a field (see [Validation](/en/other/validation) for details).
+- The first tooltip appears with standard delay,
+- Subsequent tooltips appear instantly,
+- If the previous element's tooltip has disappeared and more than 2 seconds have passed, the 0.4 second delay applies again.
 
-<!-- example(tooltip-overview) -->
+<!-- example(tooltip-hide-with-timeout) -->
 
-#### Extended tooltip
+### Usage Examples
 
-In an extended tooltip, the opposite applies: for the light theme, a light tooltip is used, and for the dark theme, a dark tooltip is used.
+#### Tooltip for Disabled Button
 
-The warning variant is not used.
+If a certain button or function is unavailable, the tooltip can explain why.
 
-<!-- example(tooltip-extended) -->
+<!-- example(tooltip-disabled) -->
 
-#### Style
+### Custom Hints
 
-<!-- example(tooltip-style) -->
+For special cases, you can change the tooltip dimensions and place more than just text inside it. Use the Contrast-fade style, which is similar to the application background, to ensure content contrast against the tooltip background.
 
-#### Arrow and offset
-
-<!-- example(tooltip-arrow-and-offset) -->
-
-### Related components
+<!-- example(tooltip-extended) -->
 
-[Dropdown](/en/components/dropdown) — a button menu that opens a list of available actions.
+### Recommendations
 
-[Popover](/en/components/popover) — a small non-modal dialog without dimming that opens next to the trigger element. It can contain text, input fields, and any controls.
+- If you need to use interactive elements (buttons, links, etc.) inside the tooltip, use [Popover](/components/popover) instead.
+- The Tooltip component is always preferable to the system one. Don't use both methods simultaneously in the same interface.
+- For tooltips to work effectively, it's important to keep them brief and clear. Long explanations can be difficult to read and distracting, so it's best to avoid them.
+- The tooltip height depends on the content. The recommended maximum height is 480px (may be increased at the designer's discretion).