2

I have a problem with the width when the tooltip is on the right edge of the screen. My tooltip has the following properties: max-width: 320px and position: fixed. And I don't understand why does tooltip shrink on the edge. I want to the tooltip come out from the right edge without shrinking. My tooltip can have one word or more, and therefore it should have adaptive width.

I have this: enter image description here

I want it to be like this: enter image description here

And I want the tooltip to be adaptive like this:
enter image description here enter image description here



I want the long tooltip text has full max-width without shrinking and small text has a small width corresponding to the text.

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

Gabda
  • 56
  • 4

2 Answers2

1

you need to use min-width not max-width

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

unfortunately, you cannot have an element with auto width and have it not trying to stay in the viewport. overflow only happens when a divs defined width/height exceeds his parent's borders.

Matan Sanbira
  • 1,433
  • 7
  • 20
  • If I will use `min-width`, then my tooltip will bigger than I want. I just want to tooltip has adaptive width. It can have 5px width, 10px, 100px, but not more than 320px – Gabda Jan 29 '20 at 19:40
-1

You have the text set to display: inline-flex and you've set no width for that element. Change your .tooltip-text styles to the following:

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

If you want to change the tooltip to position on the opposite side of the mouse when it's reached the right edge, then you need to tell it that with more JS.

bwasilewski
  • 170
  • 7
  • it will work but there is a more straight forward solution. in your example you can write `width: 320px` on the `.tooltip` and it'll work without changing the span styles – Matan Sanbira Jan 29 '20 at 19:27
  • it's not the correct way to approach CSS writing. the span is not the problem and can stay `display: inline` the width of the container is the problem. figuring out the actual problem before you guess and write your styling is bad practice. – Matan Sanbira Jan 29 '20 at 19:34
  • If i will use `.tooltip-text` with `width: 320px` the tooltip can not be responsive. I wrote, that my tooltip should be responsive because it can have 1 word or more. – Gabda Jan 29 '20 at 19:34