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.

Answers


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


  .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


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


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.


Need Your Help

How to assing values to 2 dimensional array with data from database in asp.net using c#?

c# asp.net arrays

Suppose that Sql database is StudentInfo and Table name is Registration

How to redirect to a webpage that accepts post requests?

html jsp jsoup

I am working on a project where I need to scrap data in JSOUP and the show as HTML in my webpage and on clicking view more I am forwarding to the scrapped URL, issue is where GET url's are working ...