Bootstrap 3工具提示高度

Question

我使用bootstrap 3.0.2生成动态工具提示。有些可以毫无问题地适应默认的工具提示区域，并且工具提示自动调整高度，只要它们比特定大小短，但有些大于默认允许的高度，并且内容溢出了我的工具提示。

代码如下。max-height属性是我插入的，似乎没有明显的影响。

CSS

.tooltip-inner {
  max-width: 200px;
  max-height: 300px;
  padding: 3px 8px;
  color: #ffffff;
  text-align: center;
  text-decoration: none;
  background-color: #000000;
  border-radius: 4px;
}

HTML

<div class="col_one_fifth tooltip-test" id="tecc137" data-toggle="tooltip" data-placement="top" title="" data-original-title="...">
    <div class="product-feature3"><h6 class="nopadding">Content</h6></div>
</div>

Javascript

<script> 
    $('#tecc137').tooltip({ html: true });
    $.ajax({url: 'url.php', type: 'POST', dataType: 'html', data: 'id=137', success: function(data){ $('#tecc137').attr('data-original-title', data ); } });
</script>

Answer 1

只要使用height:300px如果它是固定的，或者min-height:300px但不是最大高度，这就不允许你把它设置得比它高但也可以将它设置为300px，只表示允许的最大高度，而不是高度

回答你的评论，设置值为自动，并让最小和最大高度之间的值你说

Answer 2

所以它原来是修复添加显示:inline-block;导入bootstrap.css中的.tooltip-inner CSS。

Answer 3

问题可能是，内容有时存在，当高度被计算，有时它不是，因为它是异步被注入。我将只是消除数据切换和手动调用您的工具提示后，通过添加显示工具提示的javascript方法成功回调注入的内容:$('#tecc137').tooltip('show')。那么你就可以确定它会按照这个顺序发生