Wrong tooltip position on small screen

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

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

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

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.