固定工具提示调整到屏幕的右边缘

Question

当工具提示位于屏幕的右边缘时，我遇到了宽度问题。我的工具提示具有以下属性：最大宽度：320 像素和位置：固定。而且我不明白为什么工具提示会在边缘缩小。我希望工具提示从右边缘出来而不收缩。我的工具提示可以包含一个或多个单词，因此它应该具有自适应宽度。

我有这个：

我希望它是这样的：

我希望工具提示能够像这样自适应：

我希望长工具提示文本具有完整的最大宽度而不收缩，而小文本具有与文本相对应的小宽度。

html：

<div class="element">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</div>
  <div class="tooltip">
    <span class="tooltip-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</span>
  </div>

css：

body {
  background-color: #a3d5d3;
}

.tooltip {
  max-width: 320px;
  width: auto;
  position: fixed;
  background: #000;
  color: #fff;
  padding: 5px 10px;
  border-radius: 5px;
  pointer-events: none;
}

.tooltip-text {
  display: inline-flex;
}

JavaScript：

var tooltip = document.querySelector('.tooltip');
tooltip.style.left = 0;
tooltip.style.top = 0;

var elWithTooltip = document.querySelector('.element');

function changePosition(e) {
  const { clientX, clientY } = e;
  tooltip.style.left = clientX + "px";
  tooltip.style.top = clientY + "px";
}

elWithTooltip.addEventListener('mouseover', changePosition);
elWithTooltip.addEventListener('mousemove',changePosition);

Codepen： https://codepen.io/albertgabdullin/pen/ExazEJX

Answer 1

您需要使用min-width 而不是max-width

.tooltip {
  min-width: 320px; /* <- */
  width: auto;
  position: fixed;
  background: #000;
  color: #fff;
  padding: 5px 10px;
  border-radius: 5px;
  pointer-events: none;
}

不幸的是，你不能拥有一个具有自动宽度的元素并且它不试图留在视口中。仅当 div 定义的宽度/高度超出其父级边界时才会发生溢出。

Answer 2

您将文本设置为display: inline-flex，并且您没有为该元素设置宽度。将您的 .tooltip-text 样式更改为以下内容：

.tooltip-text {
  display: block;
  width: 320px;
}

如果您想在鼠标到达右边缘时将工具提示更改为位于鼠标的另一侧，那么您需要用更多的 JS 告诉它。