16

我有工具提示，其内容可以很长也可以很短。我不想拥有 3 个单词的内容并拥有一个巨大的工具提示，但我也不想要 20 个单词并将它们全部压缩成多行。使用此当前设置，无论如何它都会停留在最小宽度。

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;
}

的HTML：

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

让我烦恼的是我可以起飞位置：相对并且它按预期工作！然而我找不到任何解决方法，相对定位是 CSS 悬停的关键（或似乎是？）。

4

5 回答 5

16

两件事，第一，你看到的例子有width: 120px;控制宽度。将其更改为您需要修复的任何内容。

或者，如果您不想固定宽度，只需添加white-space: nowrap;文本以一行显示而不换行。

更新：您可以使用display: block;工具提示使最大宽度达到父宽度，请参见下面的示例

<!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>

选项 2，使用带有自定义悬停效果的引导工具提示，使其非常简单：

$(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>

于 2017-06-30T13:53:05.583 回答
16

也许......

width: max-content; 
max-width: 200px; (as much as you want)
于 2020-07-11T19:19:19.443 回答
4 
.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%;
}

您可以将其删除span并替换为块级元素（如divstyle display:block）

于 2013-01-26T15:52:48.430 回答
3

如果单行工具提示可以满足您的需求，您也可以添加
white-space: pre到.tool-content.

于 2015-11-24T17:31:25.893 回答
0

您可以在元素或其内部 div 中添加一个max-width并放入word-break: break-all或放入您的 css 中。word-wrap: break-word

于 2018-07-19T08:19:52.587 回答