Custom tooltip title on IE8

Question

I want to style default tooltip given by browser on IE8 preferably only from css, so how can I do that. I already read a lot articles about and till now I have nothing.

So my html looks like :

<a href="#" title="Show this title on IE8" class="title">hover me to see the tooltip</a>

fiddle: http://jsfiddle.net/uGudk/36/

so How can I style this tooltip in order to work on IE8.

Similar to this: [How to style the alt tooltip in html?](http://stackoverflow.com/questions/5041589/how-to-style-the-alt-tooltip-in-html) — Christofer Eliasson, Mar 28 '13 at 14:05
You could use a jQuery tooltip: http://jqueryui.com/tooltip/ — gaynorvader, Mar 28 '13 at 14:08
@mcmwhfy In what way is it not similar? The `alt` attribute trigger the same kind of tooltip the `title` attribute does, and the answers in that post is therefor directly applicable to this question as well. — Christofer Eliasson, Mar 28 '13 at 15:02
@Christofer Eliasson read what "alt" do on IE8 and for what "title" is used ;) — mcmwhfy, Mar 28 '13 at 16:08

score 1 · Answer 1 · answered Mar 28 '13 at 14:04

1

You cannot style the TITLE tooltip, it is not an HTML element.

answered Mar 28 '13 at 14:04

Diodeus - James MacFarlane

112,730
33
157
176

I don't get it. Why would someone gave a minus on this answer. If it wasn't posted I would have told you the same thing. – Axente Paul Mar 28 '13 at 14:22
Because they don't know the difference between a Javascript-based tooltip and the TITLE attribute that triggers built-in browser behaviour. – Diodeus - James MacFarlane Mar 28 '13 at 14:36
Clever hack :) Too bad :after pseudo classes are not supported on ie8. – Diodeus - James MacFarlane Mar 28 '13 at 16:17

9edge · Answer 2 · 2013-03-28T14:31:33.900

1

You can try this: <a class="tooltip" href="#">Click<span>This is a tooltip</span></a>

<style type="text/css">
.tooltip {
    border-bottom: 1px dotted #000000;
    color: #000000;
    outline: none;
    cursor: help; 
    text-decoration: none;
    position: relative;
}
.tooltip:hover span {
    font-family: Calibri, Tahoma, Geneva, sans-serif;
    position: absolute;
    left: 1em;
    top: 2em;
    z-index: 99;
    margin-left: 0;
    width: 250px;
    display: block;
}
span{
   display: none;    
}
</style>

Source

jsFiddle

edited Mar 28 '13 at 14:31

answered Mar 28 '13 at 14:06

9edge

819
1
9
19

@Baadshah I think we did ;) – 9edge Mar 28 '13 at 14:26
@9edge I cannot add a class or other span, I just want to style that title like a[title] – mcmwhfy Mar 28 '13 at 14:43

score 1 · Answer 3 · answered Mar 28 '13 at 14:07

  .tooltip {
    border-bottom: 1px dotted #000000; color: #000000; outline: none;
    cursor: help; text-decoration: none;
    position: relative;
            }


.tooltip:hover span {
            border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; 
            box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
            font-family: Calibri, Tahoma, Geneva, sans-serif;
            position: absolute; left: 1em; top: 2em; z-index: 99;
            margin-left: 0; width: 250px;
        }

Working DEMO

I cannot add a class or other span, I just want to style that title like a[title] — mcmwhfy, Mar 28 '13 at 14:42

score 1 · Answer 4 · answered Jan 30 '14 at 18:36

The fiddle you've listed in a few comments DOES basically work in IE8. However, most of the actual styles you're applying are ones that aren't recognized by IE8 (box-shadow, linear-gradient, and border-radius are all unsupported in IE8). If you use styles that IE8 recognizes (Like background-color, or using an actual image for the background-image), then it will be styled in IE8 as well.

Here's an example with a background-color, so you can see it in IE8: http://jsfiddle.net/elezar/w8bBk/

Also, what you're doing in that example technically isn't styling the title. It's basically doing the same thing that @sureh and @9edge recommended, but you're adding the extra element via CSS rather than in the HTML itself. You'll actually still see the title tooltip in addition to the one that you're adding and styling.

Custom tooltip title on IE8

4 Answers4