Question

有人可以向我解释如何修改发现的悬停工具提示here，以便它们动态扩展到它们包含的文本的长度吗？我找到了几个关于这个的教程，实际上它们似乎都不适用于这个特定的用例。我在这里失去了理智，我无法让它发挥作用。

Answer 1

两件事，首先你看到的例子有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，使用带有自定义悬停效果的bootstrap工具提示，使其变得非常简单：

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

具有动态宽度的CSS工具提示

1 个答案: