CODEWITHSUNDEEP
htmlcss
Daniel Birowsky Popeski
Daniel Birowsky Popeski

Reputation: 9286

Tooltip max-width with white-space: nowrap

I'm trying to overarchitect a tooltip. The goal is for the tooltip abstraction to not have any knowledge of the wide context (document). Instead, it should be placed in an element and just work.

However, I'm having difficulty achieving max-width behaviour:

enter image description here

Understandably so, since the content has white-space: nowrap.

However, without it, I face this problem:

enter image description here

Help me fix the layout so that I may get a proper max-width behaviour. Specifically, when there is no more room in the line, wrap the content in a new line.

Here's the example: https://jsbin.com/fucujak/3/edit?html,css,output

helper {
  display: inline-block;
  position: relative;
  top: 30%;
  left:30%;
  padding: 10px;
  background: green;
  color: white;
  border-radius: 300px
}

tooltip {
  display: block;
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
}

tooltip:hover tooltip-anchor {
  display: block;
}

tooltip-anchor {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  width: 0;
  height: 0;
}
tooltip-container {
  display: block;
  position: absolute;
}
tooltip-positioner {
  display: block;
  position: relative;
  left: -50%;
}
tooltip-content {
  display: block;
  padding: 10px;
  /* white-space: nowrap; */
  background: blue;
  color: white;
  max-width: 100px;
}
  <helper>
    i
    <tooltip>
      <tooltip-anchor>
        <tooltip-container>
          <tooltip-positioner>
            <tooltip-content>
              Some long, extended tooltip content
            </tooltip-content>
          </tooltip-positioner>
        </tooltip-container>
      </tooltip-anchor>
    </tooltip>
  </helper>

Upvotes: 0

Views: 1021

Answers (1)

Temani Afif
Temani Afif

Reputation: 273032

You can simply do like below:

helper {
  display: inline-block;
  position: relative;
  top: 30%;
  left: 30%;
  padding: 10px;
  background: green;
  color: white;
  border-radius: 300px
}

tooltip {
  position: absolute;
  display:none;
  top: 100%; /* place at bottom*/
  /* center*/
  left:50%;
  transform:translateX(-50%);
  /**/
  margin-right: -200px; /* this is the trick that will make sure the content can go up to 180px (an arbitrary big value) */
  max-width:180px; /* your max-width*/
  padding:10px;
  background:blue;
}
helper:hover tooltip {
 display:block;
}
<helper>
  i
  <tooltip>
    Some long, extended tooltip content
  </tooltip>
</helper>

<helper>
  i
  <tooltip>
    Some long
  </tooltip>
</helper>

Upvotes: 1

Related Questions