Why An HTML Image Alt Text Doesn't Show On Hover - Computer Hope

Skip to Main Content
  1. Home
  2. Help
  3. HTML Help
  4. HTML Q&A
Why an HTML image alt text doesn't show on hover Updated: 02/01/2021 by Computer Hope

Unlike the Microsoft Internet Explorer browser, Mozilla Firefox, Google Chrome, and other browsers do not display the text used in the alt attribute when hovering over an image. The alt text is designed to display when an image doesn't load, whereas the title text is designed to display balloon text for images that do. Firefox, Chrome, and other browsers (except Internet Explorer) follow the W3C standards for HTML (HyperText Markup Language), which states that an image should have title attribute for balloon text. For that reason, these browsers do not display the alt text on hovering over the image.

If you want balloon text to appear when the mouse hovers over an image, add "title" to the img HTML tag as shown in the example code below.

Computer Hope logoImage with only an alt attribute. (Does not show balloon text.)

<img alt="Example of alt text" src="https://www.computerhope.com/cdn/media/logo-200.png">

Computer Hope logo Image with both alt and title attributes. (Shows balloon text with mouse hover.)

<img alt="Example of alt text" title="Example of title text" src="https://www.computerhope.com/cdn/media/logo-200.png">

If you are using Mozilla Firefox or Google Chrome, the first example displays no balloon text with only an alt attribute in the code. However, adding the title attribute, as seen in the second example, displays balloon text when the mouse hovers over the image.

  • HTML <img> tag information and help
  • How to create a text description for an image in HTML.
  • Computer Hope media library
  • HTML and web design help and support.
  • Was this page useful?YesNo
    • Feedback
    • E-mail
    • Share
    • Print

Từ khóa » Html Button Alt Text On Hover