CODEWITHSUNDEEP
htmlcss
TheIronCheek
TheIronCheek

Reputation: 1139

How to force span width to length of inner text?

I have an icon that when hovered over displays a tooltip blurb. I've fashioned it based on the W3Schools CSS tooltip example.

Here's the code:

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  /* I WANT THIS TO CHANGE BASED ON TEXT LENGTH */
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
<body style="text-align:center;">

  <p>Move the mouse over the text below:</p>

  <div class="tooltip">Hover over me
    <span class="tooltiptext">Some fairly long tooltip text that should <br /> only display on two lines.</span>
  </div>
</body>

My problem is that the text that appears in the tooltip is generated dynamically and may be wider than the static 120px width of the blurb. I want the width of the blurb to adjust based on the width of the text but if I set the width to auto, it only stretches as wide as the first word. How do I make that width change?

Upvotes: 1

Views: 1733

Answers (2)

Matthew Moore
Matthew Moore

Reputation: 866

The following will keep a minimum 120px wide tooltip, as well as prevent text from wrapping on its own ( <br> tags will need to be used for linefeeds). It also will break/look ugly if the message is too long.

<!DOCTYPE html>
<html>
<style>
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
    visibility: hidden;
    min-width: 120px; /* min-width makes sure it will always be at least 120px */
    white-space: nowrap; /* Prevents text from wrapping on its own */
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;

    /* Position the tooltip */
    position: absolute;
    z-index: 1;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}
</style>
<body style="text-align:center;">

<p>Move the mouse over the text below:</p>

<div class="tooltip">Hover over me
    <span class="tooltiptext">Some fairly long tooltip text that should <br /> only display on two lines.</span>
</div>

</body>
</html>

Upvotes: 0

Huangism
Huangism

Reputation: 16438

Just set white-space: nowrap; instead of setting width on .tooltip .tooltiptext

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  white-space: nowrap; /* this is new */
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
<body style="text-align:center;">

  <p>Move the mouse over the text below:</p>

  <div class="tooltip">Hover over me
    <span class="tooltiptext">Some fairly long tooltip text that should <br /> only display on two lines.</span>
  </div>
</body>

Upvotes: 1

Related Questions