javascript - 修复了工具提示调整大小到屏幕右边缘的问题

Question

当工具提示位于屏幕右边缘时，我遇到宽度问题。我的工具提示具有以下属性:最大宽度: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>

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

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