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

我正在尝试使用内联 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 http://www.w3.org/TR/2002/WD-css-style-attr-20020515

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

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

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

如果您想查看的话，这里有一个现场演示 http://jsfiddle.net/luissanchezm86/3FXDz/2/

如果您愿意，您可以查看更多示例/想法here http://www.menucool.com/tooltip/css3-tooltip#

希望能帮助到你！