Adding a CSS callout to a tooltip

Question

I want to show a tooltip everytime the user hovers a specific span.class I've got some code working but unfortunately, it either shows the tooltip or... only the callout.

Here's my code:

HTML:

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<br>
<br>
<span class="rnd">[<span class="pos">suffix</span>] Some random text..............</span>
    <a href="#" class="tooltip">Tooltip<span>what a <u>rainy</u> day.</span></a>

CSS:

.tooltip {
    outline:none;
}
.tooltip strong {
    line-height:30px;
}
.tooltip:hover {
    text-decoration:none;
}
.tooltip span {
    z-index:10;
    display:none;
    padding:14px 20px;
    margin-top:30px;
    margin-left:-160px;
    width:240px;
    line-height:16px;
}
.tooltip:hover span {
    display:inline;
    position:absolute;
    border:2px solid #FFF;
    color:#EEE;
    background:#000;
}
.tooltip span {
    border-radius:2px;
    box-shadow: 0px 0px 8px 4px #666;
    opacity: 0.8;
}
.pos {
    font-weight: bold;
    display: inline;
    position: relative;
    text-decoration: none
}
.pos:hover:before {
    display:inline;
    border: solid;
    border-color: #333 transparent;
    border-width: 0px 6px 6px 6px;
    bottom: -20px;
    content:"";
    left: 50%;
    position: absolute;
    z-index: 99;
    font-style: normal;
}

I would like it to look like this: http://jsfiddle.net/Lu3G8/

@MujtabaFathel I can do it javascript... javascript only (no jquery). Hover over Tooltip and Suffix — Cornwell
– Cornwell, Commented Apr 20, 2014 at 21:10
Could you post an image of what you want it to look like? I'm not sure what the problem is. — bjb568
– bjb568, Commented Apr 20, 2014 at 21:31

bjb568 · Accepted Answer · 2014-04-20 22:14:08Z

4

http://jsfiddle.net/5hMs8/2/

<span class="tooltip pos">suffix<span>An affix that follows the element to <u>which</u> it is added, as <i>-ly</i>  in <i>kindly</i>.</span></span>

I changed the CSS (.pos:hover:before) from bottom: -30px to bottom: -12px.

answered Apr 20, 2014 at 22:14

bjb568

11.5k11 gold badges53 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Rakesh Juyal Over a year ago

+1 Nice solution, I was thinking about .js solution. By the way will it support IE8?

bjb568 Over a year ago

It will work on IE8, but not on IE7. For more support, use this.

Cornwell Over a year ago

Very elegant solution! Thank you very much

Tony Suffolk 66 Over a year ago

A very late comment - but this doesn't seem to work in all cases : jsfiddle.net/pcn101qp/1 demonstrates that the tooltip has a gap on all but the first line.

Collectives™ on Stack Overflow

Adding a CSS callout to a tooltip

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related