CSS tooltips won't stretch, can only have fixed width

问题

I have tooltips whose content can range from very long to very short. I don't want to have 3 words' worth of content and have a huge tooltip, but I also don't want 20 words and have it all scrunched up on multiple lines. With this current setup, it stays stuck at the minimum width regardless.

The CSS:

.tooltip {
  outline: none; position: relative;
  min-width: 75px; max-width: 255px;
}

.tooltip .tool-content {
  opacity: 0; visibility: hidden;
  position: absolute;
}

.tooltip:hover .tool-content {
  background: #999; border: 1px solid #555; color: #000000;

  /* general styling */
  position: absolute; left: 1.3em; top: 2.6em; z-index: 99;
  visibility: visible; opacity: 1;
}

The HTML:

<div class='tooltip'>
(content to hover)
    <span class='tool-content'>
        (tooltip content)
    </span>
</div>

What troubles me is that I can take off position: relative and it works as intended! Yet I can find no work around, and relative positioning is key (or appears to be?) to having CSS hovers.

回答1:

.tooltip {
  outline: none;
  position: relative;
  width: 75px;
  min-width: 75px;
  max-width: 255px;
}

.tooltip .tool-content {
  margin:0;
  padding:0;
  opacity: 0;
  visibility: hidden;
  position: absolute;
  width:100%;
  height:100%;
}

You can remove span and replace it with a block level element (like div with style display:block)

回答2:

Two things, 1st the example you saw has width: 120px; which control the width. change it to whatever you need to be fixed.

Or if you don't want to fix the width, just add white-space: nowrap; so the text display in one line without wrap.

UPDATED: you could use display: block; so the tooltip get max width up to the parent width, see example below

<!DOCTYPE html>
<html>
<style>
  .tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
  }
  
  .tooltip .tooltiptext {
    visibility: hidden;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    /* Position the tooltip */
    position: absolute;
    display: block;
    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">Tooltip text</span>
  </div>
  <br><br>
  <div class="tooltip">Hover over me Hover over me
    <span class="tooltiptext">Tooltip text very very very very very very very very long</span>
  </div>
  <br><br>
  <div class="tooltip">Hover over me Hover over me 3
    <span class="tooltiptext">Tooltip text very very very very very very very very long very very very very very very very very long very very very very very very very very long very very very very very very very very long very very very very very very very very long very very very very very very very very long very very very very very very very very long</span>
  </div>
</body>

</html>

Option 2, use bootstrap tooltip with customized hover effect, make it very easy:

$(document).ready(function() {
  var originalLeave = $.fn.tooltip.Constructor.prototype.leave;
  $.fn.tooltip.Constructor.prototype.leave = function(obj) {
    var self = obj instanceof this.constructor ?
      obj : $(obj.currentTarget)[this.type](this.getDelegateOptions()).data('bs.' + this.type)
    var container, timeout;

    originalLeave.call(this, obj);

    if (obj.currentTarget) {
      container = $(obj.currentTarget).siblings('.tooltip')
      timeout = self.timeout;
      container.one('mouseenter', function() {
        clearTimeout(timeout);
        container.one('mouseleave', function() {
          $.fn.tooltip.Constructor.prototype.leave.call(self, self);
        });
      })
    }
  };

  //init all tooltip
  $('body').tooltip({
    selector: '[data-toggle=tooltip]',
    trigger: 'hover',
    delay: {
      hide: 50
    }
  });
});

.centered {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 50px;
}

.tooltip-inner {
  max-width: 500px !important;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<ul class="list-inline centered">
  <li><a href="#" data-toggle="tooltip" data-placement="left" title="Hooray!">Left</a></li>
  <li><a href="#" data-toggle="tooltip" data-placement="right" title="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.">Right</a></li>
</ul>

回答3:

If having a single-line tooltip is fine for your needs, you could also just add
white-space: pre to the .tool-content.

回答4:

You can just add a max-width and put in word-break: break-all or word-wrap: break-word on your css on the element or in its inner div.

回答5:

maybe......

width: max-content; 
max-width: 200px; (as much as you want)

来源：https://stackoverflow.com/questions/14538551/css-tooltips-wont-stretch-can-only-have-fixed-width

标签

html

css

position

tooltip