Title attribute not working in IE11
Hi, I just want to ask what happened to my program. I am making this program where I need to select a file. But the button is an image and I would like to add a tooltip that it is an image for file selection. This block of codes works great in chrome. But when I run it in IE11, the "Select File" header is not displayed in IE11. I didn't know IE has many limitations. Unlike chrome.
.image-upload>input {
visibility: hidden;
width: 0px;
height: 0px;
margin: -10%;
}
div.item {
vertical-align: top;
display: inline-block;
text-align: center;
width: 250px;
img {
width: 90px;
height: 50px;
}
.caption {
display: block;
color: white;
}
div.space {
margin-top: -15px;
}
<div class="image-upload">
<label for="file-input">
<p align="left"><font face="Arial" color="black" size = "5"><b>   Select File    </b><span style="cursor:pointer" alt="Select File" title="Select File">
<img src="http://icons.veryicon.com/ico/Folder/Black%20glamour/Files.ico" style="pointer-events: none" id="img" title="Select File"/></span></font></p></label>
</label>
<input id="file-input" type="file" name="file" onchange="onFileSelected(event)" onclick=getName() required>
</div>
source to share
You need to remove the inline style pointer-events:none
from the image tag if you want to hover over it.
If it is set to none, it means that your mouse cannot interact with the element and therefore cannot hover over it to show the title.
Try it:
<img src="http://icons.veryicon.com/ico/Folder/Black%20glamour/Files.ico" id="img" title="Select File"/>
An example script with and without pointer events
More information on pointer events
Also notice the following errors in your code:
- font tag is deprecated and should not be used - use css instead
- There must be a semicolon after n & n:
- there is an extra end mark and I don't think you are allowed p tags inside - use a validator to validate your code
<div class="image-upload">
<p align="left"><label for="file-input"><b> Select File </b>
</label></p>
<span style="cursor:pointer; display:inline-block;" alt="Select File" title="Select File"><label for="file-input"><img src="http://icons.veryicon.com/ico/Folder/Black%20glamour/Files.ico" id="img" title="Select File"/>
</label></span>
<input id="file-input" type="file" name="file" onchange="onFileSelected(event)" onclick=getName() required>
</div>
source to share
you could add another one span
(for example), give it an absolute position and display it in the image.
you can also javascript (jquery) show it at the same position as your cursor, but this is a little more complicated.
See below if this is what you want
.title {
transition: 0.3s ease-out;
opacity: 0;
position: absolute;
top: 50%;
left: 0%;
transform: translateY(-50%);
font-size: 15px;
background: #fff;
}
.wrapper {
display: inline-block;
position: relative;
}
.wrapper:hover .title {
opacity: 1;
}
<div class="image-upload">
<label for="file-input">
<p align="left"><font face="Arial" color="black" size="5"><b>   Select File    </b> <span class="wrapper" style="cursor:pointer" alt="Select File" title="Select File">
<span class="title">Select File</span>
<img src="http://icons.veryicon.com/ico/Folder/Black%20glamour/Files.ico" style="pointer-events: none" id="img" title="Select File"/></span></font></p>
</label>
</label>
<input id="file-input" type="file" name="file" onchange="onFileSelected(event)" onclick=getName() required>
</div>
source to share