CODEWITHSUNDEEP
jqueryhtmlcsstooltiptitle
mcmwhfy
mcmwhfy

Reputation: 1686

Custom tooltip title on IE8

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.

Upvotes: 0

Views: 3328

Answers (4)

Elezar
Elezar

Reputation: 1511

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.

Upvotes: 1

9edge
9edge

Reputation: 809

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

Upvotes: 1

Suresh Atta
Suresh Atta

Reputation: 121998

  .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

Upvotes: 1

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114347

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

Upvotes: 1

Related Questions