How to create tooltip without JavaScript using only inline 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.

This link will give you your answer: [**LINK**](http://stackoverflow.com/questions/1033156/how-to-write-ahover-in-inline-css) — vishalkin, Oct 02 '13 at 03:44

score 8 · Answer 1 · answered Oct 02 '13 at 03:57

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!

score 1 · Answer 2 · answered Jun 24 '21 at 18:26

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.

score 0 · Answer 3 · edited Dec 26 '13 at 04:34

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

How to create tooltip without JavaScript using only inline CSS?

3 Answers3

Linked