Question

我正在尝试使用没有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就可以使用它。

Answer 1

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

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;    
}

Here's a live demo if you want to check it out

如果您愿意，可以查看更多示例/提示here

希望它有所帮助！

Answer 2

试试这个样本......

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 demo

Answer 3

最佳答案并没有完全解决问题的具体字母（正如评论所暗示的那样可能是不可能的），但提供了一个有价值的即插即用解决方案（如果您可以访问样式表）。我发现自己处于类似的情况，但是我无法修改页面样式表（只能插入 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 来获取内部元素。此样式取自 this fiddle。

如何在没有JavaScript的情况下使用内联CSS创建工具提示？

3 个答案: