Frontend: Not displaying image title on hover - Support | Kriesi.at

Tagged: image title seen on hover

Viewing 8 posts - 1 through 8 (of 8 total)

Author

Posts
October 23, 2024 at 10:38 am #1469678
SHR Design
Participant
Hi

A general problem is that hovering an image on the frontend will show its title. An example:

Nyhet

Moving the cursor around the image this will show up: rotina420r_rgb
I tested with the default theme of Twenty Twenty Four and the image title is not seen on hover there.
https://bluewinddesign.com/ (Contains a cover block with an image and has an image title.)

Do I have to add a Code Snippet plugin on very site with the following code?
```
jQuery(document).ready(function($) {
  $('img[title]').each(function() { $(this).removeAttr('title'); });
});
```
How to remove image title attribute on hover WordPress

I noticed another thread mention these things as well:

I don't want the images file names to show on mouse hover

When will this issue be fixed?

Thank you!
- This topic was modified 1 month, 3 weeks ago by SHR Design.
- This topic was modified 1 month, 3 weeks ago by SHR Design. Reason: Additional information
October 23, 2024 at 12:55 pm #1469687

Rikard
Keymaster

Hey Silje,

This is default browswer behaviour, it’s not theme functionality. When hovering over links for example, the browser will show the title attribute, like if you hover over the Duckduckgo logo here. The Duckduckgo search engine is not running Enfold as far as I know. I would suggest that you keep your title attributes, as they matter for SEO and accessibility.

Best regards,
Rikard

October 23, 2024 at 11:00 pm #1469714

SHR Design
Participant

Hey

I am using the Brave browser which is a variation of Chrome.

Duckduckgo logo here.https://duckduckgo.com/
Using the Brave browser I do not see any image title on hover when hovering over the logo.

I mentioned testing the default theme Twenty Twenty Four on another site here: https://bluewinddesign.com/
I was wrong I am testing the new upcoming theme Twenty Twenty Five and RC1 of WP 6.7
Using Gutenberg. A cover block with an image. It does not show image title on hover. I also added other kinds of blocks below it.
Do you see any image title on hover on any of these?

Another site running the theme Blocksy.
Hover over the image used there: https://okosamfunn.no/
Do you see any image title show up?

Now for Enfold I have to add JavaScript to remove the image title so it is not seen on hover. Adding JS is not a good approach. As you say the image title should not be removed.

Go to https://wordpress.org/ do any of the images show an image title when you hover the images?

From the exploration above Using the new Twenty Twenty Five upcoming default theme or a Blocksy theme I was not able to see any image title show up on hover. I do with the Enfold theme. Again I am testing using the Brave browser.

Suggestions?

October 24, 2024 at 6:21 am #1469728

Ismael
Moderator

Hi,

Thank you for the update.

From the exploration above Using the new Twenty Twenty Five upcoming default theme or a Blocksy theme I was not able to see any image title show up on hover. I do with the Enfold theme.

The title tooltip doesn’t display because the Block Images don’t have the title attribute. The title and alt attributes do display when using the Image element from the Enfold theme. Unfortunately, we do not know why this is the case for the Image Blocks. They are supposed to have alt and class attributes, but they are not rendering.

Best regards,
Ismael

October 24, 2024 at 6:28 am #1469729

Ismael
Moderator

Hi,

UPDATE: Looks like the Image Block doesn’t use the title and alt attribute in the Media > Library by default. You have to manually set it in the Image Blocks’ Settings > Alternative text and Advanced > Title attribute fields.

Best regards,
Ismael

October 24, 2024 at 12:53 pm #1469760
Guenni007
Participant
because sometimes it is usefull to have a title tag on an image ( becaue if you like to show it in a lightbox – this will be the caption for it by default) it makes sense to only remove them on hovering the image – for that put this to your child-theme functions.php:
```
function temporary_removal_title_tags(){
?>
<script>
  window.onload = function() {
      var links = document.querySelectorAll('a, img, *[title]');
      for (var i = 0; i < links.length; i++) {
          var link = links[i];
          link.onmouseover = function() {
              this.setAttribute("data-tooltip", this.title);
              this.title = "";
          };
          link.onmouseout = function() {
              this.title = this.getAttribute("data-tooltip");
          };
          link.onmousedown = function() {
              this.title = this.getAttribute("data-tooltip");
          };
      }
  };
</script>
<?php
}
add_action('wp_footer', 'temporary_removal_title_tags');
```
A temporary storage takes place to a data-tooltip – and on mouseout or click (mousedown) it will bring back the title tag.

By the way – your example pages do not use the title tag on their images:
October 24, 2024 at 7:45 pm #1469795

SHR Design
Participant

I made this issue because it would be good to have an easy way when using Enfold to select not to show image title on hover.
It seems that Blocksy and Gutenberg will not display the image title. If I want to include the Image title in an Image block in Gutenberg I would need to open Advanced and add in the title as mentioned by Ismael.

Now instead of a customer needing to include code to not show the image title on hover it would be helpful that Enfold itself found a way to handle it without needing the customer to tackle it.

Thank you for the discussion!

October 25, 2024 at 6:26 am #1469814
Ismael
Moderator
Hi,

Thank you for the update.

There is no option for this by default but you can modify the script provided by @Guenni007 above to only apply on Image elements with a specific class name such as “av-no-title-hover”. You can apply the class name in the Image elements’ Advanced > Developer Settings > Custom CSS Class field.
```
function temporary_removal_title_tags(){
?>
<script>
  window.onload = function() {
      var elements = document.querySelectorAll('.av-no-title-hover a[title], .av-no-title-hover img[title]');
      for (var i = 0; i < elements.length; i++) {
          var element = elements[i];
          element.onmouseover = function() {
              this.setAttribute("data-tooltip", this.title);
              this.title = "";
          };
          element.onmouseout = function() {
              this.title = this.getAttribute("data-tooltip");
          };
          element.onmousedown = function() {
              this.title = this.getAttribute("data-tooltip");
          };
      }
  };
</script>
<?php
}
add_action('wp_footer', 'temporary_removal_title_tags');
```
Best regards,
Ismael
Author

Posts

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.