如何仅使用内联CSS创建没有JavaScript的工具提示？

Question

我想使用内联CSS而不是JavaScript创建一个悬停提示。

这是我现在的代码

<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的情况下使用。

- Kyra

---

这个链接将会给你答案： LINK - vishalkin

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

这里有一个实时演示，你可以查看一下。

如果你想的话，你可以在这里查看更多例子和想法。

希望能对你有所帮助！

- Luis

Answer 2

顶部的答案并没有完全解决问题的具体要求（根据评论可能是不可能的），但提供了一个有价值的即插即用的解决方案（如果您可以访问样式表）。我发现自己处于类似的情况，但我无法修改页面样式表（只能插入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。

- mcnutt

Answer 3

尝试这个示例......

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演示

- Sindhu