CODEWITHSUNDEEP
javascripthtmlcss
M Pascual
M Pascual

Reputation: 55

Title attribute not working in IE11

Hi I just want to ask what's wrong with my program. Im doing this program where I have to choose a file. But the button is an image and I would like to add a tooltip that this image is for selecting a file. This block of codes is perfectly working in chrome. But when I run it in IE11 the title "Select File"is not showing in IE11. I didn't know that IE has a lot of restriction. Unlike in 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>&nbsp&nbsp&nbspSelect File&nbsp&nbsp&nbsp </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>

Upvotes: 4

Views: 5224

Answers (2)

Pete
Pete

Reputation: 58432

You need to remove the inline style of pointer-events:none from the image tag if you want to be able to hover it.

By setting it to none, it means your mouse can't interact with the element and therefore it cannot hover it to show the title.

Try this: 

<img src="http://icons.veryicon.com/ico/Folder/Black%20glamour/Files.ico"  id="img" title="Select File"/>

Example fiddle showing with and without pointer events

More information about pointer events

Also please note the following errors with your code:

  • the font tag is obsolete and should not be used - use css instead
  • &nbsp should have a semi colon after it: &nbsp;
  • there is an extra end label and I don't think you are allowed p tags inside - use a validator to check your code

<div class="image-upload">
  <p align="left"><label for="file-input"><b>&nbsp;&nbsp;&nbsp;Select File&nbsp;&nbsp;&nbsp; </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>

Upvotes: 1

Mihai T
Mihai T

Reputation: 17687

you could add another span ( for example ), give it position absolute, and on hover on the image, show it .

you can also you javascript ( jquery ) to show it in the same position your cursor is, but that's a bit 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>&nbsp&nbsp&nbspSelect File&nbsp&nbsp&nbsp </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>

Upvotes: 0

Related Questions