CSS Tooltips line break

问题

I've text to show inside a tooltip on hover of an icon.
The tooltips width need to be:

max-width:300px
if the text fit in one line and less than 300px, adjust to text width
if the text need many lines, the tooltip width need to be 300px

How can I define the .tooltip .content-tooltip to work like describe before ?
I've tried using white-space: nowrap; and some word-break ...

.tooltip {
    position: relative;
    margin-right: 5px;
  display: block;
  text-align: center;
  width: 75px;
  padding: 5px;
  border: 1px dotted #000;
  margin: 70px auto;
}

.tooltip .content-tooltip {
    position: absolute;
    bottom: calc(100% + 13px);
    background: #000;
    color: #fff;
    display: block;
    left: 50%;
    transform: translateX(-50%);
    padding: 5px 10px 6px;
    display: none;
  text-align: left;
  max-width: 300px;
    width: auto;
}

.tooltip:hover .content-tooltip {
    display: block;
}

<h1>Example</h1>

<span class="tooltip">
  short text
  <span class="content-tooltip">
    Lorem
  </span>
</span>

<span class="tooltip">
  long text
  <span class="content-tooltip">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Nulla nunc massa, eleifend a feugiat ac, varius eu eros.
    Praesent at vulputate risus. Pellentesque dictum pulvinar lectus.
  </span>
</span>

<hr><hr>

<h1>What I expect</h1>

<span class="tooltip">
  short text
  <span class="content-tooltip">
    Lorem
  </span>
</span>

<span class="tooltip">
  long text
  <span class="content-tooltip" style="width: 300px">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Nulla nunc massa, eleifend a feugiat ac, varius eu eros.
    Praesent at vulputate risus. Pellentesque dictum pulvinar lectus.
  </span>
</span>

回答1:

I fixed the issue by taking out the tooltip from the text content element, and wrapped the tooltip and text content width another div which will act container for both of them, so that tooltip won't take up the width as per the text content instead it will take the width as specified.

This how you should do it:

body {
    display: flex;
    gap: 30px;
    padding: 1rem;
}

.text {
    padding: 10px;
}

.tooltip {
    display: none;
    position: absolute;
    background: #000;
    color: #fff;
    max-width: 300px;
    padding: 10px;
}

.text-contianer:hover > .tooltip {
    display: inline-block;
}

<div class="text-contianer">
    <div class="text">
        Short
    </div>
    <span class="tooltip">
        Lorem
    </span>
</div>

<div class="text-contianer">
    <div class="text">
        Long
    </div>
    <span class="tooltip">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Nulla nunc massa, eleifend a feugiat ac, varius eu eros.
    Praesent at vulputate risus. Pellentesque dictum pulvinar lectus.
    </span>
</div>

回答2:

The desired solution can be attained if you set a height value to the tooltip.

I see that you've used max-width, which is the desirable here but one thing which I guess you missed is that the default value of height for tooltip is auto, due to which if you reduce the width of the tooltip, the component will adjust to increase the height. One simple solution as I mentioned is to set a height value, and overflow to hidden

Updated CSS Code:

.tooltip {
  position: relative;
  margin-right: 5px;
  display: block;
  text-align: center;
  width: 75px;
  padding: 5px;
  border: 1px dotted #000;
  margin: 70px auto;
}

.tooltip .content-tooltip {
    position: absolute;
    bottom: calc(100% + 13px);
    background: #000;
    color: #fff;
    display: block;
    left: 50%;
    transform: translateX(-50%);
    padding: 5px 10px 6px;
    display: none;
  text-align: left;
  max-width: 320px;
  height: 15px; //height value set to avoid component auto adjust
  overflow: hidden; //overflow hidden
}

.tooltip:hover .content-tooltip {
    display: block;
}

回答3:

Found myself a solution :

.tooltip {
    position: relative;
    margin-right: 5px;
  display: block;
  text-align: center;
  width: 75px;
  padding: 5px;
  border: 1px dotted #000;
  margin: 70px auto;
}
.tooltip .sizing-tooltip {
    position: absolute;
    bottom: calc(100% + 13px);
    left: 50%;
    transform: translateX(-50%);
    display: none;
    width: 300px;
}
.tooltip .content-tooltip {
    background: #000;
    color: #fff;
    padding: 5px 10px 6px;
    display: block;
    text-align: left;
    max-width: 300px;
    width: auto;
    margin: 0 auto;
}

.tooltip:hover .sizing-tooltip {
    display: flex;
}

<h1>Example</h1>

<span class="tooltip">
  short text
  <span class="sizing-tooltip">
    <span class="content-tooltip">
      Lorem
    </span>
  </span>
</span>

<span class="tooltip">
  long text
  <span class="sizing-tooltip">
    <span class="content-tooltip">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Nulla nunc massa, eleifend a feugiat ac, varius eu eros.
      Praesent at vulputate risus. Pellentesque dictum pulvinar lectus.
    </span>
  </span>
</span>

来源：https://stackoverflow.com/questions/65142784/css-tooltips-line-break

标签

html

css