
-
AuthorPosts
-
June 16, 2025 at 8:56 am #1485492
I would like to hide the wording/label that appears when you mouse-over an icon.
I have some Icons displayed. One of them is an icon of a map. When one mouses-over it, the label “map” appears.I’ve tried this style in my style sheet, but no change:
.data-av_svg_icon, .icon-label {display: none !important;}thanks much
June 16, 2025 at 9:07 am #1485493Hey laptophobo,
Thank you for the inquiry.
Try to add this filter in the functions.php file to remove the default attributes of the SVG icons:
add_filter('avf_ignore_svg_aria_attributes', '__return_true');
Let us know the result.
Best regards,
IsmaelJune 16, 2025 at 9:28 am #1485494Hi Ismael,
That functions.php edit didn’t work for me. to be sure we’re on the same page here, please see this image link: http://dev.websitebrew.com/wp-content/uploads/2025/06/map-label.jpg
June 16, 2025 at 9:52 pm #1485532i use for title attributes on links, images etc. this function in my child-theme functions.php:
function temporary_removal_title_tags(){ ?> <script> window.onload = function() { var elementsWithTitle = document.querySelectorAll('a, img, *[title]'); for (var i = 0; i < elementsWithTitle.length; i++) { var element = elementsWithTitle[i]; element.setAttribute("data-original-title", element.title); element.addEventListener("mouseenter", function() { this.title = ""; }); element.addEventListener("mouseleave", function() { this.title = this.getAttribute("data-original-title"); }); element.addEventListener("mousedown", function() { this.title = this.getAttribute("data-original-title"); }); } }; </script> <?php } add_action('wp_footer', 'temporary_removal_title_tags');
BUT this will not influence the <title> inside the xml code of a svg file!
you can get rid of those <title> but i do not know a way to get them back by mouseleave or mousedown event:
the code above with a little addon – so use instead:function temporary_removal_title_tags_and_get_rid_of_svg_titles(){ ?> <script> window.onload = function() { var elementsWithTitle = document.querySelectorAll('a, img, *[title]'); for (var i = 0; i < elementsWithTitle.length; i++) { var element = elementsWithTitle[i]; element.addEventListener("mouseenter", function() { if (this.title) { this.setAttribute("data-original-title", this.title); this.title = ""; } }); element.addEventListener("mouseleave", function() { var storedTooltip = this.getAttribute("data-original-title"); if (storedTooltip !== null) { // Prüfen, ob ein Originaltitel gespeichert wurde this.title = storedTooltip; this.removeAttribute("data-original-title"); // Aufräumen } }); element.addEventListener("mousedown", function() { var storedTooltip = this.getAttribute("data-original-title"); if (storedTooltip !== null) { this.title = storedTooltip; this.removeAttribute("data-original-title"); } }); } var allSvgs = document.querySelectorAll('svg'); allSvgs.forEach(function(svg) { var svgTitles = svg.querySelectorAll('title'); svgTitles.forEach(function(svgTitleElement) { if (svgTitleElement.textContent.trim() !== '') { svgTitleElement.setAttribute("data-original-svg-title", svgTitleElement.textContent); svgTitleElement.textContent = ""; // Leeren des SVG-Titels } }); }); }; </script> <?php } add_action('wp_footer', 'temporary_removal_title_tags_and_get_rid_of_svg_titles');
why not delete all title tags: sometimes these are needed for lightbox bottom bar
June 17, 2025 at 5:24 am #1485539Thanks for that Guenni,
I hadn’t expected that removing a superfluous icon tag would be so complicated. Having that tag show up is rather confusing to the viewer. Anyway, I’m going to just keep the icon issue as it is. It’s not such a big deal.Thanks again!
June 17, 2025 at 6:49 am #1485541Hi,
The tooltip or icon tag is a default browser feature, and the only way to disable it is by removing the title attribute or tag. The script provided by @Guenni007 and the the filter we shared should take care of that.
We’ll close the thread for now but if you have more questions, feel free to start another.
Have a nice day.
Best regards,
IsmaelJune 17, 2025 at 10:11 am #1485563June 17, 2025 at 10:28 am #1485565Hi,
@Guenni007: Looks like the filter is intended only for the ARIA attributes of the SVG logo.Best regards,
IsmaelJune 17, 2025 at 10:41 am #1485568Thanks guys for trying. We can close this now.
June 17, 2025 at 8:55 pm #1485589Hi,
Thanks for the update. Please open a new thread if you should have any further questions or problems.
Best regards,
Rikard -
AuthorPosts
- The topic ‘hide the icon mouse-over label’ is closed to new replies.