How to create tooltip without JavaScript using only inline CSS? - css

Question

I'm trying to create a hover tooltip using inline CSS without JavaScript.
This is the code I have now
<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>
According to this it should be allowed: http://www.w3.org/TR/2002/WD-css-style-attr-20020515
I know this is not the recommended way to do it, but it needs to be usable where only inline CSS can be used.

Answer 1

You were pretty close, I've added some properties:
HTML Markup:
<a href="#" class="tooltip">hover text
<span>tooltip thisIsALongTextMadeToBeBreak</span>
</a>
CSS Markup:
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
If you want, you can check it out some more examples/ideas here
Hope it helps!

Answer 2

try this sample.....
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;
}
above css create a tooltip ...
for demo
JsFiddle demo

Answer 3

The top answer doesn't quite address the specific letter of the question (which as a comment suggests may just be impossible), but provides a valuable plug and play solution (if you have access to a stylesheet). I found myself in a similar situation, but where I wasn't able to modify the page style sheet (only insert html), so I thought i'd also give an answer that is effective but misses the specifics of the question.
In particular, should you be willing to use a little bit of javascript, then you can make use of this hacky approach:
<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>
The use of this.children instead of querySelector is intentional, as it makes it easier to just drop in, without the need for adjusting ids to get the inner element. This styling is drawn from this fiddle.