CSS工具提示不会拉伸，只能具有固定的宽度 [英] CSS tooltips won't stretch, can only have fixed width

问题描述

我有一些工具提示，其内容范围可以从很长到很短.我不想拥有3个单词的内容并且没有大量的工具提示，但我也不想20个单词并将其全部压缩为多行.在此当前设置下，无论如何它都将停留在最小宽度上.

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.

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悬停的关键(或者似乎是?).

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.

推荐答案

.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 并将其替换为块级元素(例如样式为 display:block 的 div )

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

这篇关于CSS工具提示不会拉伸，只能具有固定的宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！