在Angular中，将提示框（tooltip）放置在容器内的可用大空间内

Question

我有一个编辑器，用户可以在其中创建横幅，用户可以将元素拖动到横幅中的任意位置。该元素带有一个工具提示，在悬停时应显示该工具提示，其位置取决于周围空间最大的一侧（上、左、下、右），并且无论在什么情况下，工具提示都不应超出容器范围。

HTML 代码示例


    
    
        我们尊重您的隐私

TypeScript 代码示例

banner = {
    buttonId: 11,
    tooltipId: 2,
    x: 0,
    y: 0
};

onCircleButtonDragEnd(event) {
    const container = event.currentTarget as HTMLElement;
    const containerWidth = container.clientWidth;
    const containerHeight = container.clientHeight;

    this.banner.x = ((event.clientX - container.getBoundingClientRect().left) / containerWidth) * 100;
    this.banner.y = ((event.clientY - container.getBoundingClientRect().top) / containerHeight) * 100;
}

CSS 样式

.point-button {
    /* ... 省略其他样式定义 ... */
}

.point-button:hover + .tooltip {
    display: block;
}

.banner-container {
    width: 350px;
    height: 200px;
    max-width: 100%;
    border: 2px dotted #ccc;
}

.tooltip {
    width: fit-content;
    height: 50px;
    border: 2px solid #ccc;
    display: none;
}

实时演示: DEMO

更新说明:
不使用任何库的情况下实现此功能。

Michael Dautermann · Answer

TL;DR

StackBlitz 示例

概览与修正步骤

问题概述

给定的示例中存在几个需要解决的问题，包括事件处理、样式设置以及浮动提示（tooltip）的位置计算。

修正步骤

事件处理：onCircleButtonDragEnd 中接收到的 $event 实际上不是 MouseEvent 对象，而是 CdkDragEnd 事件。要访问鼠标事件，应使用 $event.source.getFreeDragPosition() 获取拖动元素的当前位置。
样式调整：由于 CdkDrag 指令已通过 transform: translate3d 设置了点按钮（point-button）的正确位置，因此不需要手动设置 [style.left] 和 [style.top]。
单位问题：为 tooltip 组件设置的 [style.left] 和 [style.top] 必须包含单位（如像素 px），否则样式不会应用到元素上。
定位调整：为了使 tooltip 正确地浮动在可拖动的点按钮旁边，应将 banner-container 的定位设为 relative，并将 tooltip 的定位设为 absolute。
尺寸与位置计算：
- 使用 @ViewChild 装饰器获取容器、提示框和点按钮的尺寸。
- 在 AfterViewInit 生命周期钩子中，保存提示框尺寸，设置初始提示框位置，并隐藏提示框（设置 hidden 属性）。
- 编写逻辑以根据点按钮的位置动态调整提示框位置。这涉及到将容器分为四个三角形区域，并根据点按钮落在哪个区域内来决定提示框的显示位置。
数学计算：编写一个函数 computeTheSegment，它根据点在容器中的相对位置确定其所属的三角形区域（T, R, B, L）。然后，根据点按钮的新位置更新提示框的位置，确保不超出容器边界。

解决方案演示

提供了一个修正后的 StackBlitz 示例，展示了如何处理上述问题并实现预期效果。注意，解决方案还包括考虑屏幕调整大小事件对容器尺寸的影响，尽管示例中可能未直接体现这一点。

注意事项

代码中应使用正确的属性和方法来获取元素位置和尺寸。
确保所有计算逻辑考虑到了元素尺寸变化和边界条件，以防止溢出或错位。

通过以上步骤，可以有效地解决示例中提到的问题，并实现一个跟随拖拽元素移动的浮动提示功能。

sideshowbarker · Answer

简而言之（TL;DR）

StackBlitz 示例

可以通过创建一个函数来计算和决定工具提示(tooltip)的 top 和 left 属性位置。之后，可以便捷地使用 [ngStyle] 应用这些样式：


  
  
    这是一个工具提示 :-)

在组件类中，定义该函数以计算工具提示的位置，并在视图初始化后及拖拽释放时调用它：

export class YourComponent implements AfterViewInit {
  @ViewChild('container') container!: ElementRef;
  @ViewChild('element') element!: ElementRef;
  @ViewChild('tooltip') tooltip!: ElementRef;
 
  tooltipStyle = {};

  ngAfterViewInit() {
    this.updateTooltipStyle();
  }
  
  updateTooltipStyle() {
    // 计算容器、元素和工具提示的边界
    const parentRect  = this.container.nativeElement.getBoundingClientRect();
    const elementRect = this.element.nativeElement.getBoundingClientRect();
    const tooltipRect = this.tooltip.nativeElement.getBoundingClientRect();
  
    // 计算四周的可用空间
    const spaceLeft   = elementRect.left  - parentRect.left;
    const spaceRight  = parentRect.right  - elementRect.right;
    const spaceTop    = elementRect.top   - parentRect.top;
    const spaceBottom = parentRect.bottom - elementRect.bottom;

    // 选择水平或垂直方向上空间较大的一侧
    const spaceX = Math.max(spaceLeft, spaceRight) - tooltipRect.width;
    const spaceY = Math.max(spaceTop, spaceBottom) - tooltipRect.height;

    let tooltipTop, tooltipLeft;

    // 根据空间大小决定工具提示的对齐方式
    if (spaceX > spaceY) {
      tooltipLeft = spaceLeft > spaceRight
        ? elementRect.left - parentRect.left - tooltipRect.width - MARGIN
        : elementRect.right - parentRect.left + MARGIN;

      tooltipTop = Math.min(
        Math.max(0, (elementRect.top - parentRect.top) + (elementRect.height - tooltipRect.height) / 2),
        parentRect.height - tooltipRect.height
      );
    } else {
      tooltipTop = spaceTop > spaceBottom
        ? elementRect.top - parentRect.top - tooltipRect.height - MARGIN
        : elementRect.bottom - parentRect.top + MARGIN;

      tooltipLeft = Math.min(
        Math.max(0, (elementRect.left - parentRect.left) + (elementRect.width - tooltipRect.width) / 2),
        parentRect.width - tooltipRect.width
      );
    }

    // 应用计算好的样式
    this.tooltipStyle = {
      left: `${tooltipLeft}px`,
      top: `${tooltipTop}px`,
      width: `${tooltipRect.width}px`
    };
  }
}

注意：代码中的 MARGIN 是一个未定义的常量，你需要根据实际情况定义它，作为工具提示与元素之间的间距。这里提供了一个工作中的 StackBlitz 示例，尽管给出的链接似乎遇到了错误，但上述代码段概括了实现这一功能的方法。