Max-width in Pseudo class?

Question

I have a css tooltip attached to a span as follows:

<span class="mytooltip" data-mytooltip="Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. ">
    Has Tooltip
</span>

The CSS is in short:

.mytooltip {
  display: inline-block;
  position: relative; 
}
.mytooltip:hover:after {
  content: attr(data-mytooltip);
  display: block;
  margin-top: 0.7rem;
  margin-left: -1rem;
  left: auto;
  bottom: auto;
  padding: .3rem 1rem;
  position: absolute;
  z-index: 98;
  width: 400px; 
}

In .mytooltip:hover:after{} width: 400px and max-width: 400px; white-space: nowrap; works as expected. The later doesn't make much sense, because though the pseudo element has the right width, the text is floating over, when it's longer than 400px. Is there a way to use max-width on the pseudo element with the text wrapped inside?

I'd be very grateful for advice.

Yuri Gor · Answer 1 · 2016-11-07T18:20:05.550

0

Finally, I can only suggest tooltip text wrapped manually

.mytooltip {
  display: inline-block;
  position: relative; 
  margin:15px;
  border: 1px solid red;
  overflow:visible;
}

.mytooltip:hover:after {
  content: attr(data-mytooltip);
  display: table-cell;
  margin-top: 0.7rem;
  margin-left: -1rem;
  left: auto;
  bottom: auto;
  padding: .3rem 1rem;
  position: absolute;
  z-index: 98;
  max-width: 400px; 
  white-space:pre;
  border: 1px solid #000;
  overflow:hidden;
}

<span class="mytooltip" data-mytooltip="Text here. Text here. &#xa;Text here. Text here. Text here. &#xa;Text here. Text here. Text here. Text here. ">
    Has Tooltip
</span>

edited Nov 07 '16 at 18:20

answered Nov 07 '16 at 14:58

Yuri Gor

1,353
12
26

In Chrome the text is cut with ... at the end, when longer than the max-width and I can't display it. That was not the target. Do you maybe have a solution where the whole text is visible? – Anja Nov 07 '16 at 15:07
it works because you have set position: relative, but that makes the tooltip stretch the field in which it's in, what it shouldn't. I tried width: auto on the element, what sounded like a good idea, but still, sorry, max-width is not recognised in the pseudo element with your data and position:absolute. – Anja Nov 07 '16 at 16:34
Finally, I can only suggest tooltip text wrapped manually, see snippet again – Yuri Gor Nov 07 '16 at 18:20
Sounded like a good idea. But html tags in content of a pseudo element are not allowed, not even escaped. It's maybe just not possible with max-width and wrap in a pseudo element. Still, thank you. – Anja Nov 07 '16 at 23:40
Yes it works as a line break. But that is not what i wanted to achieve. I wanted to have wrapped text in a container with a max-width in a pseudo element as a tooltip, what is a quite common use. Question is if a pure CSS solution is possible with some minimum layout options. I'd say now it isn't. – Anja Nov 08 '16 at 10:09
This question might shed some light on the reason for your problems. The display element must be a block element. http://stackoverflow.com/questions/4019604/chrome-safari-ignoring-max-width-in-table – pvl Nov 11 '16 at 15:23

Max-width in Pseudo class?

1 Answers1