CODEWITHSUNDEEP
htmlcsstooltipinternet-explorer-10
omega
omega

Reputation: 43843

Tooltips not working on IE10

I want to show tooltips on parts of an image. I have this technique where it puts a invisible div on the image with absolute positioning.

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<meta http-equiv="X-UA-Compatible" content="IE=10" >
</head>

<body>

    <div style="position:relative;">
        <img src="http://blog.caranddriver.com/wp-content/uploads/2016/11/BMW-M2-lead.jpg"/>
        <div title="HELLO" style="position:absolute; width:100px; height:100px; top:0; left:0;"></div>
    </div>

</body>

</html>

but when I hover over, the tooltip does not show.

Does anyone know what's wrong? This same code works on chrome 59.

Thanks

Upvotes: 2

Views: 512

Answers (1)

Fabio_MO
Fabio_MO

Reputation: 701

this code seems to be ok on Explorer, Chrome, Firefox and Edge. img tag has a different behaviour of div tag in Explorer.

<!DOCTYPE html>
<html>
    <head>
        <title>Title of the document</title>
        <meta http-equiv="X-UA-Compatible" content="IE=10">
    </head>
    <body>
        <div style="position:relative;">
            <img src="http://blog.caranddriver.com/wp-content/uploads/2016/11/BMW-M2-lead.jpg"/>
            <img style="position:absolute; width:100px; height:100px; top:0; left:0; border-width: 0px;" src="javascript:void(0)" title="Test" alt="">
        </div>
    </body>
</html>

Upvotes: 1

Related Questions