Hide radio button tooltip on hover

Hi @mrhaza

I hope you’re well today!

These tooltips are displayed by the browser “on its own” based on the “title” attribute of the label of the field. The “Title” attribute is recommended to be there and can’t be disabled “in the plugin”. Removing it could possibly cause some issues with accessibility (like some screen readers and similar assistive technology).

However, there’s a “trick” to remove them “on the fly” on hoover with a bit of additional JS. You’d need to add this script to the site:

jQuery(document).ready(function($) {
    $('[title]').mouseover(function () {
        $this = $(this);
        $this.data('title', $this.attr('title'));
        // Using null here wouldn't work in IE, but empty string will work just fine.
        $this.attr('title', '');
    }).mouseout(function () {
        $this = $(this);
        $this.attr('title', $this.data('title'));
    });
});

It removes the “title” attribute from option label element at the moment when coursor hovers over it (so browser doesn’t show that popup) and re-adds it when pointer is out of the element.

You can add it to the site via some “custom JS” option of your theme or any plugin that allows adding JS snippets to site.

Kind regards,
Adam

Thank you very much, but I am getting error:

Fatal error: Uncaught Error: Using $this when not in object context in /www/doc/www.xxx.cz/www/wp-content/plugins/code-snippets/php/snippet-ops.php(484) : eval()’d code:5

line 5 is:
$this = $(this);

Hi @mrhaza

Please note that I shared JS (JavaScript) code and the error that you shared is about PHP code.

I suppose that’s because it’s added via the code snippet plugin. I tested it added directly to the site. Nonetheless, this error should be simple to address so just try replacing the code that I shared with this version, please:

jQuery(document).ready(function($) {
    $('[title]').mouseover(function () {
        $(this).data('title', $(this).attr('title'));
        $(this).attr('title', '');
    }).mouseout(function () {
        $(this).attr('title', $(this).data('title'));
    });
});

This shouldn’t cause error and would work the same way.

Best regards,
Adam

Working great.

Thank you very much!