Compact Hover Showing Code Snippet

Home Forums Product Support Forums Ajax Search Pro for WordPress Support Compact Hover Showing Code Snippet

This topic contains 2 replies, has 2 voices, and was last updated by jpequens jpequens 3 years, 6 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #20909
    jpequens
    jpequens
    Participant

    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.
    #20922
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    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 :)


    #20947
    jpequens
    jpequens
    Participant

    Yep, it was the title tag. Thanks!

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

You must be logged in to reply to this topic.