Compact Hover Showing Code Snippet

[jpequensParticipant]

Hello –

I have the search bar in two places on my site. The search on my homepage hero section works fine.

I also have added a compact search bar to the top navigation menu. When you hover over the magnifying glass or if you hover over any of the search results, a white box appears with code snippets (see attached screen shots). The live version is at ResumeExamples.com

I was not able to pin-point the specific element trying to inspect the page. It may be a simple css display:none or z-index solution, but again I was not able to find the specific element.

Thanks,

John

Attachments:

You must be logged in to view attached files.

[Ernest MarcinkoKeymaster]

Hi,

Thank you very much for the details, I see the issue. The search bar printed in the menu, is surrounded by an link tag (I guess it’s a menu feature), and that link tag has a title attribute, which has the same content as the plugin shortcode. The title tag shows on browsers when hovering over an element, in this case the whole search is surrounded with it, so it shows whenever the cursor is over it.

I believe the best way to bypass this issue, is to use a custom code, so that hovering over this element, will reset it’s content to an empty string, and it won’t show anymore.

Try adding this custom code to the functions.php in your theme/child theme directory. Before editing, please make sure to have a full site back-up just in case!

add_action('wp_footer', 'asp_remove_title_tag');
function asp_remove_title_tag() {
    ?>
    <script>
    jQuery(function($){
        $('a.nav-link').on('hover', function(){
            $(this).attr('title', '');
        });
    });
    </script>
    <?php
}

This should remove the title attribute, once hovered over the menu item containing the search bar.

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[jpequensParticipant]

Yep, it was the title tag. Thanks!

[Author]

Posts