Javascript 修复了工具提示调整到屏幕右边缘的问题

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

我有这个：

我希望它是这样的：

我希望工具提示可以像这样自适应：

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

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>

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;
}

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);

JavaScript:

<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>

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;
}

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:

您将文本设置为

display:inline flex

，并且您没有为该元素设置宽度。将

工具提示文本
样式更改为以下样式：

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

如果要在鼠标到达右边缘时将工具提示更改为位于鼠标的另一侧，则需要告诉它使用更多JS。
您需要使用
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;
}

。工具提示{
min width:320px；/*它可以工作，但有一个更直接的解决方案。在您的示例中，您可以在
上编写
width:320px
。工具提示
并且在不更改span样式的情况下工作。这不是CSS编写的正确方法。span不是问题，可以保留
显示：内联
样式的宽度容器是问题所在。在猜测和编写样式之前找出实际问题是不好的做法。如果我将
。工具提示文本
与
宽度：320px
一起使用，则工具提示不能响应。我写道，我的工具提示应该响应，因为它可以包含1个字或更多。如果我将使用
最小宽度
，则我的工具提示将比我想要的大。我只想工具提示具有自适应宽度。它可以有5px宽度，10px，100px，但不能超过320px