Member Avatar for willrose84

Hi im not sure if I'm explaining this right or if I'm in the right place. I have built a website but when ever you hold the mouse over an image or link a little box appears right next to the mouse with a couple of words so the link title or the number of the picture,

does anyone have any ideas on how I can hide it or not show it at all?

I hope some one can help

will

  • 4 Contributors
  • 4 Replies
  • 88 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by drjohn

Dani AI

Generated

The hover box you see is the browser showing element metadata (the usual source is the title attribute). Several replies here (notably , and ) rightly flag accessibility and SEO concerns, so avoid bluntly deleting descriptive text. A practical compromise is to stop the native tooltip while keeping machine- and assistive-friendly text.

One safe pattern: keep semantic text where it matters (image alt, ARIA labels) and move any visual-only tooltip text into a data-* attribute that a small script can use for a custom tooltip UI. If you just want to suppress the native browser tooltip, remove or clear title only during hover/focus and restore it afterward so automated tools and validators still see it in normal markup. Example approach:

<a href="..." aria-label="Descriptive label" data-tooltip="Tooltip text">
  <img src="..." alt="Descriptive label">
</a>
document.querySelectorAll('[title]').forEach(function(el){
  el.addEventListener('mouseenter', function(){ this.dataset.origTitle = this.getAttribute('title') || ''; this.removeAttribute('title'); });
  el.addEventListener('mouseleave', function(){ if(this.dataset.origTitle!==undefined){ this.setAttribute('title', this.dataset.origTitle); delete this.dataset.origTitle; }});
  el.addEventListener('focus', function(){ if(this.getAttribute('title')){ this.dataset.origTitle=this.getAttribute('title'); this.removeAttribute('title'); }});
  el.addEventListener('blur', function(){ if(this.dataset.origTitle!==undefined){ this.setAttribute('title', this.dataset.origTitle); delete this.dataset.origTitle; }});
});

Test with keyboard-only navigation and a screen reader. For background on title, alt, and ARIA attributes, see MDN resources on the title global attribute, the img element alt, and aria-label (title, img alt, aria-label).

Recommended Answers

All 4 Replies

Member Avatar for almostbob

alt and title attributes are a required part of the html specs
the page will operate if you remove them from your image tags, if there is nothing in 'alt="alttext"' it does not display an empty box, but

  • the page will not validate,
  • be down-graded by search engines,
  • inaccessible to screen readers, which depending on your location and the intent of local legislation on accessibility, gets you sued
  • unhelpful to vistors

and its generally a bad idea,
better is to ensure the displayed data is correct and helpful

Member Avatar for willrose84

is there a way to hide it from veiw but it still be there for search engins and readers?

Member Avatar for Member #120589

Why do you want to do this? Most webdevs/designers would go the extra mile to make the site as accessible as possible. You may find a js script to do this, but it doesn't sound like a good idea to me.

Member Avatar for drjohn

Also, the text got there because YOU put it there...

Ardav's post above sums it up - most people try hard to include this for good reasons like accessibility. It's a bit like objecting to your car having brakes because you want to drive fast, not slow.

Edited by drjohn because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.