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, Apr 20 '14 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, Apr 20 '14 at 21:31
@bjb568 I want it to look like this: http://jsfiddle.net/Lu3G8/ (which I can't use since I can't put HTML tags inside the CSS content) — Cornwell, Apr 20 '14 at 21:37

score 4 · Accepted Answer · answered Apr 20 '14 at 22:14

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 '14 at 22:14

bjb568

11,089
11
50
71

+1 Nice solution, I was thinking about .js solution. By the way will it support IE8? – Rakesh Juyal Apr 21 '14 at 03:59
It *will* work on IE8, but not on IE7. For more support, use [this](http://selectivizr.com). – bjb568 Apr 21 '14 at 04:02
Very elegant solution! Thank you very much – Cornwell Apr 21 '14 at 06:27
A very late comment - but this doesn't seem to work in all cases : http://jsfiddle.net/pcn101qp/1/ demonstrates that the tooltip has a gap on all but the first line. – Tony Suffolk 66 Feb 04 '16 at 13:32

Adding a CSS callout to a tooltip

1 Answers1