Wrong tooltip position on small screen

HTML & CSS
1

I noticed that (probably after the last changes) tooltips in small screen are not correctly positioned (they can go out of the screen, as you can see here ) over the phrase «non necessariamente anticristiane».
I wonder why…

the code is:

/* --- tooltip BEGIN --*/
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

.tooltip {
  position: relative;
  display: inline;
  border-bottom: 1px dotted black;
  text-indent: 0px !important;
}

.tooltip .tooltiptext {
  visibility: hidden;
/*   width: 160%; */
  text-align: justify;
  font-size: 80%;
  background-color: white;
  color: black;
  border-radius: var(--rounded);
  padding: 10px;
  position: absolute;
  z-index: 1000;
  bottom: 100%;
  left: 15%;
  margin-left: -60px;
  margin-bottom: 3%;
  opacity: 0;
/*   transition: opacity 0.7s; */
  box-shadow: gray -3px 3px 4px;
}


.tooltiptext {
  min-width: 20vw}
  
.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 10%;
  margin-left: -5px;
  border-width: 12px;
  border-style: solid;
  border-color: white transparent transparent transparent;
}  

.tooltip .tooltiptext {
 transform:translateY(10%);
 transition:visibility 0.1s, opacity 0.2s linear, transform 0.2s linear;
}
.tooltip:hover .tooltiptext {
 transform:translateY(0%);
}
/* --- tooltip END --*/

Screenshot_20231112_140352
Screenshot_20231112_140352404×780 137 KB

2

If the first word of the tooltip starts near the end of the line then of course the tooltip will go outside to the right because that’s where you placed it.

Without using js to detect the width available and moving the tooltip back on screen your best bet is to make the tooltip an inline-block element so that it starts on a new line if there is not enough room for it all on one line.

e.g.

.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
    text-indent: 0px !important;
}

That should cater for most cases.

I’d also remove the margin-left: -60px of the tooltip (magic number alert!) and reset the left:15% to left:0;

1 Like
3

Perfect!! :100: :smiley:
Thank you very, very much!

1 Like