Question

在下面的代码段中，我为工具提示指定了最大宽度为400px。它的宽度远远小于它。为什么工具提示的宽度不是400px？我不想明确地将它指定为400px作为宽度，因为如果内容很低，它应该具有120px作为宽度（这是最小宽度）。

body {
  display: flex;
  justify-content: center;
  height: 100vh;
  align-items: center;
}

.select {
  position: relative;
  height: 30px;
  background: black;
  color: white;
  padding: 10px 20px;
  line-height: 30px;
}

.tooltip {
  display: none;
}
.tooltip:after {
  position: absolute;
  bottom: 100%;
  left: 100%;
  margin-bottom: 30px;
  margin-left: -20px;
  display: block;
  content: attr(title);
  background: red;
  color: white;
  line-height: 16px;
  font-size: 14px;
  padding: 12px;
  min-width: 120px;
  max-width: 400px;
}
.tooltip:before {
  position: absolute;
  bottom: 100%;
  left: 100%;
  content: '';
  height: 0;
  width: 0;
  border-top: 6px solid red;
  border-bottom: 6px solid transparent;
  border-left: 9px solid red;
  border-right: 9px solid transparent;
  margin-left: -20px;
  margin-bottom: 21px;
}

.tooltip.active {
  display: block;
}

<div class="select">
  <div class="tooltip active" title="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora quam, voluptatem aliquam quos, soluta nostrum repellat unde magni voluptatibus placeat vitae numquam voluptatum ab temporibus id illo. Voluptatem, iusto, incidunt?"></div>
  I have a tooltip
</div>

元素宽度不增加到最大宽度

0 个答案: