显示 CSS 内容高于一切
Display CSS content above everything else
我找到了一个非常简单的 CSS 示例,用于使用 content
设置创建自定义工具提示,它的演示看起来很棒。我采用样式并将其实现到我自己的页面中,但是我很快注意到工具提示似乎使用最小宽度作为宽度,并且显示在其他所有内容下方。
我已经尝试了几十种变体,但到目前为止没有任何方法可以解决这个问题。谁能深入了解如何解决这个问题?
span[data-tooltip]
{
position: relative;
cursor: help;
}
span[data-tooltip]:hover:after
{
content: attr(data-tooltip);
display: inline-block;
position: absolute;
top: 1em;
right: -200%;
background: rgba(240,240,240,1.0);
border: 1px solid rgba(0,0,0,1.0);
min-width: 10em;
padding: 0.25em;
text-shadow: none;
}
HTML:
<span data-tooltip='Tool Tip'><img src='http://www.economicmodeling.com/wp-content/uploads/Info-icon.jpg' width=12px height=12px></span>
使用z-index
:
span[data-tooltip]:hover:after
{
content: attr(data-tooltip);
display: inline-block;
position: absolute;
top: 1em;
right: -200%;
background: rgba(240,240,240,1.0);
border: 1px solid rgba(0,0,0,1.0);
min-width: 10em;
padding: 0.25em;
text-shadow: none;
z-index:99;
}
我找到了一个非常简单的 CSS 示例,用于使用 content
设置创建自定义工具提示,它的演示看起来很棒。我采用样式并将其实现到我自己的页面中,但是我很快注意到工具提示似乎使用最小宽度作为宽度,并且显示在其他所有内容下方。
我已经尝试了几十种变体,但到目前为止没有任何方法可以解决这个问题。谁能深入了解如何解决这个问题?
span[data-tooltip]
{
position: relative;
cursor: help;
}
span[data-tooltip]:hover:after
{
content: attr(data-tooltip);
display: inline-block;
position: absolute;
top: 1em;
right: -200%;
background: rgba(240,240,240,1.0);
border: 1px solid rgba(0,0,0,1.0);
min-width: 10em;
padding: 0.25em;
text-shadow: none;
}
HTML:
<span data-tooltip='Tool Tip'><img src='http://www.economicmodeling.com/wp-content/uploads/Info-icon.jpg' width=12px height=12px></span>
使用z-index
:
span[data-tooltip]:hover:after
{
content: attr(data-tooltip);
display: inline-block;
position: absolute;
top: 1em;
right: -200%;
background: rgba(240,240,240,1.0);
border: 1px solid rgba(0,0,0,1.0);
min-width: 10em;
padding: 0.25em;
text-shadow: none;
z-index:99;
}