5

我正在尝试使用没有 JavaScript 的内联 CSS 创建悬停工具提示。

这是我现在拥有的代码

<a href="#" 
style="{position:relative; top:50px; left:50px;}
       :hover span {opacity:1; visibility:visible;}">
  hover text
  <span 
  style="top:-10px; background-color:black; color:white; border-radius:5px; opacity:0; position:absolute; -webkit-transition: all 0.5s; -moz-transition:  all 0.5s; -ms-transition: all 0.5s; -o-transition:  all 0.5s; transition:  all 0.5s; visibility:hidden;">
    tooltip text
  </span>
</a>

据此应该允许：http ://www.w3.org/TR/2002/WD-css-style-attr-20020515

我知道这不是推荐的方法，但它需要在只能使用内联 CSS 的情况下可用。

4

3 回答 3

8

你非常接近，我添加了一些属性：

HTML 标记：

<a href="#" class="tooltip">hover text
  <span>tooltip thisIsALongTextMadeToBeBreak</span>
</a>

CSS 标记：

a.tooltip {
    position: relative; 
    top: 50px; 
    left: 50px;
}

a.tooltip:hover span {
    opacity: 1; 
    visibility: visible;
}

a.tooltip span {
    padding: 10px;
    top: 20px;     
    min-width: 75px;
    max-width: 150px;
    background-color: #000000; 
    color: #FFFFFF;
    height: auto;
    border-radius: 5px; 
    opacity: 0; 
    position:absolute;
    visibility: hidden;
    word-wrap: break-word;
    -webkit-transition: all 0.5s; 
       -moz-transition: all 0.5s; 
        -ms-transition: all 0.5s; 
         -o-transition: all 0.5s; 
            transition: all 0.5s;    
}

如果您想查看，这里有一个现场演示

如果您愿意，可以在此处查看更多示例/想法

希望能帮助到你！

于 2013-10-02T03:57:26.077 回答
0

试试这个样本.....

a.tooltip {
outline:none;
}
a.tooltip strong {
line-height:30px;
}
a.tooltip:hover {
text-decoration:none;
}
a.tooltip span {
z-index:10;
display:none;
padding:14px 20px;
margin-top:-30px;
margin-left:28px;
width:240px;
line-height:16px;
 }
 a.tooltip:hover span {
display:inline;
position:absolute;
color:#111;
border:1px solid #DCA;
background:#fffAF0;
 }
.callout {
z-index:20;
position:absolute;
top:30px;
border:0;
left:-12px;
 }
/*CSS3 extras*/
a.tooltip span {
border-radius:4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-moz-box-shadow: 5px 5px 8px #CCC;
-webkit-box-shadow: 5px 5px 8px #CCC;
box-shadow: 5px 5px 8px #CCC;
}

上面的css创建一个工具提示...

用于演示 JsFiddle 演示

于 2013-10-02T05:29:26.387 回答
0

最佳答案并没有完全解决问题的具体字母（正如评论所暗示的那样可能是不可能的），但提供了一个有价值的即插即用解决方案（如果您可以访问样式表）。我发现自己处于类似的情况，但我无法修改页面样式表（仅插入 html），所以我想我也会给出一个有效但错过问题细节的答案。

特别是，如果您愿意使用一点javascript，那么您可以使用这种 hacky 方法：

<div 
   onMouseOver="this.children[0].style.display = 'block'"
   onMouseOut="this.children[0].style.display = 'none';"
   >Example Content
    <span id="innerContent" style="
    display: none;
    background: #C8C8C8;
    margin-left: 28px;
    padding: 10px;
    position: absolute;
    z-index: 1000;
    width:200px;
    height:100px;">Inner Content</span>
</div>

使用 this.children 代替 querySelector 是有意的，因为它更容易直接放入，而无需调整 id 来获取内部元素。这个样式是从这个 fiddle中提取的。

于 2021-06-24T18:26:00.047 回答