CSS / jQuery:如何防止工具提示消失在主包装器的边框后面(工作代码)
CSS / jQuery: How to prevent tooltip from disappearing behind border of main wrapper (working code)
我是 CSS 的新手,希望有人能帮助我。
我正在尝试为悬停显示创建工具提示。它需要能够显示 HTML 内容,所以我不能使用 title 属性方法,我不想为此使用插件。
到目前为止,我有下面的一般工作,即布局和内容是预期的,它出现在悬停等。
但是,我遇到一个问题,我自己也弄不明白:
如果我在较小的屏幕尺寸上测试它,那么我的工具提示的一部分会消失在主页包装器的右边框后面,因此工具提示的一半会隐藏在它后面。
有没有一种方法可以设置它,使工具提示宽度达到最大直到主包装器的右边界,然后扩展它的高度而不是它的宽度?
我尝试在此处使用 overflow
和 z-index
,但仍然无法正常工作。
另一方面,我不得不使用 white-space: nowrap 否则我会得到高度很大但宽度很小的工具提示。
我的CSS:
.tooltip {
display: inline;
margin: 0;
padding: 0;
position: relative;
}
.tooltip span {
background: blue;
border-radius: 10px;
box-shadow: 2px 2px 3px #666;
color: #fff;
height: auto;
min-height: 30px;
position: absolute;
text-align: left;
visibility: hidden;
white-space: nowrap;
width: auto;
}
.tooltip span:after {
border-bottom: 8px solid transparent;
border-right: 8px solid blue;
border-top: 8px solid transparent;
content: '';
height: 0;
margin-top: -8px;
position: absolute;
right: 100%;
top: 16px;
width: 0;
}
.tooltip:hover span {
left: 100%;
margin-left: 15px;
margin-top: -15px;
filter: alpha(opacity=100);
opacity: 1;
padding: 8px 16px;
top: 50%;
visibility: visible;
z-index: 999;
}
示例 HTML:
<div class="col-12 tooltip">
<input type="text" required />
<span>
<strong>Some text</strong><br />
<ul>
<li> Some text</li>
<li> Some text</li>
<li> Some text</li>
<li> Some text</li>
</ul>
</span>
</div>
更新:
如果 jQuery 是更好的方法,请也让我知道。
非常感谢,
麦克
尝试使用@media:
例如
@media (max-width: 350px) {
.tooltip span:after {
border-left: 8px solid transparent;
border-bottom: 8px solid blue;
border-right: 8px solid transparent;
content: '';
height: 0;
position: absolute;
left: 30%;
top: -8px;
width: 0;
}
.tooltip:hover span {
left: 0;
margin-top: 20px;
}
}
只需更改 @media.
中 tooltip class 的样式即可
希望对你有帮助。
我是 CSS 的新手,希望有人能帮助我。
我正在尝试为悬停显示创建工具提示。它需要能够显示 HTML 内容,所以我不能使用 title 属性方法,我不想为此使用插件。
到目前为止,我有下面的一般工作,即布局和内容是预期的,它出现在悬停等。
但是,我遇到一个问题,我自己也弄不明白:
如果我在较小的屏幕尺寸上测试它,那么我的工具提示的一部分会消失在主页包装器的右边框后面,因此工具提示的一半会隐藏在它后面。
有没有一种方法可以设置它,使工具提示宽度达到最大直到主包装器的右边界,然后扩展它的高度而不是它的宽度?
我尝试在此处使用 overflow
和 z-index
,但仍然无法正常工作。
另一方面,我不得不使用 white-space: nowrap 否则我会得到高度很大但宽度很小的工具提示。
我的CSS:
.tooltip {
display: inline;
margin: 0;
padding: 0;
position: relative;
}
.tooltip span {
background: blue;
border-radius: 10px;
box-shadow: 2px 2px 3px #666;
color: #fff;
height: auto;
min-height: 30px;
position: absolute;
text-align: left;
visibility: hidden;
white-space: nowrap;
width: auto;
}
.tooltip span:after {
border-bottom: 8px solid transparent;
border-right: 8px solid blue;
border-top: 8px solid transparent;
content: '';
height: 0;
margin-top: -8px;
position: absolute;
right: 100%;
top: 16px;
width: 0;
}
.tooltip:hover span {
left: 100%;
margin-left: 15px;
margin-top: -15px;
filter: alpha(opacity=100);
opacity: 1;
padding: 8px 16px;
top: 50%;
visibility: visible;
z-index: 999;
}
示例 HTML:
<div class="col-12 tooltip">
<input type="text" required />
<span>
<strong>Some text</strong><br />
<ul>
<li> Some text</li>
<li> Some text</li>
<li> Some text</li>
<li> Some text</li>
</ul>
</span>
</div>
更新:
如果 jQuery 是更好的方法,请也让我知道。
非常感谢, 麦克
尝试使用@media:
例如
@media (max-width: 350px) {
.tooltip span:after {
border-left: 8px solid transparent;
border-bottom: 8px solid blue;
border-right: 8px solid transparent;
content: '';
height: 0;
position: absolute;
left: 30%;
top: -8px;
width: 0;
}
.tooltip:hover span {
left: 0;
margin-top: 20px;
}
}
只需更改 @media.
希望对你有帮助。