title: How to create tooltip without JavaScript using only inline CSS?
body: <p>I'm trying to create a hover tooltip using inline CSS without JavaScript. </p>
  
  <p>This is the code I have now</p>
  
  <pre><code>&lt;a href="#" 
  style="{position:relative; top:50px; left:50px;}
         :hover span {opacity:1; visibility:visible;}"&gt;
    hover text
    &lt;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;"&gt;
      tooltip text
    &lt;/span&gt;
  &lt;/a&gt;
  </code></pre>
  
  <p>According to this it should be allowed: <a href="http://www.w3.org/TR/2002/WD-css-style-attr-20020515" rel="nofollow">http://www.w3.org/TR/2002/WD-css-style-attr-20020515</a></p>
  
  <p>I know this is not the recommended way to do it, but it needs to be usable where only inline CSS can be used. </p>