“Please fill out this field” tooltip on Search box

  • I’m setting up a website for a friend and for some reason when you hover over the “Search” box it displays a tooltip saying “Please fill out this field”.

    I can’t for the life of me figure out how to remove the tooltip or even change the message to something sensible. Please see here (hover over the Search in the top-right) –

    This is with the Twenty Twenty-Four theme, and the tooltip appears in both Chrome and Microsoft Edge (I found someone else had a similar issue which was Chrome only).

    Thanks in advance!!

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)

  • The text comes from the browser. Reason: the field is marked as required in the HTML code. As a result, every browser now displays this tooltip. You can therefore not change it. You could only remove it if you remove the required marking from the search field.

    As noted above, you can remove the required attribute from the search box and this will make this Please fill out this field. tooltip go away. To do so, you can add some code to your WordPress install.

    (Before reading on, please note that modifying your functions.php file and/or adding code snippets to your site can cause it to break. Always backup your site before making changes to it.)

    If you still want to give this a shot, you can try adding this PHP/JavaScript snippet to your theme’s functions.php file:

    function custom_remove_search_box_required_attribute() {
        ?>
        <script type="text/javascript">
            document.addEventListener('DOMContentLoaded', function() {
                var searchInputs = document.querySelectorAll('.wp-block-search__input');
                searchInputs.forEach(function(input) {
                    input.removeAttribute('required');
                });
            });
        </script>
        <?php
    }
    add_action('wp_footer', 'custom_remove_search_box_required_attribute');

    Here is what each part does:

    PHP Function: The function custom_remove_required_attribute outputs a JavaScript snippet directly into the footer of the site.

    JavaScript Code: This JavaScript code waits for the page to be fully loaded and then selects all elements with the class .wp-block-search__input (the WordPress search block) that have the required attribute and then removes it.

    wp_print_footer_scripts Action Hook: This WordPress hook ensures that the script is added at the very end of the page, just before the closing </body> tag. This ensures the page is fully loaded before the script runs.

    If you don’t want to edit your theme’s functions.php file, you can try adding this code to your site via a plugin like Code Snippets.

    Adding this code removed the search box tooltip for me on my Twenty Twenty-Four test site. Hope this helps!

Viewing 2 replies - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.