Исправлено изменение размера всплывающей подсказки к правому краю экрана

Question

У меня проблема с шириной, когда всплывающая подсказка находится на правом краю экрана. Моя подсказка имеет следующие свойства: max-width: 320px и position: fixed. И я не понимаю, почему всплывающая подсказка сжимается по краю. Я хочу, чтобы всплывающая подсказка выходила с правого края без усадки. Моя всплывающая подсказка может иметь одно или несколько слов, и поэтому она должна иметь адаптивную ширину.

У меня есть это:

Я хочу, чтобы это было так:

И я хочу, чтобы всплывающая подсказка была адаптивной:

Я хочу, чтобы длинный текст всплывающей подсказки имел максимальную ширину без сжатия, а маленький текст имел небольшую ширину, соответствующую тексту.

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.