How to add a CSS class to the tooltip on a navigation menu?

I’m looking for a way to add a CSS class to the anchor tag of the tooltip on a menu item. Currently, I see that you can easily add a CSS class to the menu’s li but I’m trying to style the tooltip itself, not the menu item.

Looking at the Codex for wp_nav_menu, I don’t see an argument available to handle adding a class to the tooltip anchor.

Read More

Is there a filter I can use? How?

FYI, I’m using a plugin called Simple Tooltips to create the tooltips, as all it requires is that I add a class to the HTML element I want to add a tooltip to.

Related posts

2 comments

  1. Add this code into your functions.php

    
    
    class Tooltips_Walker extends Walker_Nav_Menu
    {
    
        function start_el(&$output, $item, $depth, $args)
        {
            $classes     = empty ( $item->classes ) ? array () : (array) $item->classes;
    
            $class_names = join(
                ' '
            ,   apply_filters(
                    'nav_menu_css_class'
                ,   array_filter( $classes ), $item
                )
            );
    
            ! empty ( $class_names )
                and $class_names = ' class="'. esc_attr( $class_names ) . '"';
    
            $attributes  = '';
    
            if(strstr($class_names, 'tooltips')) {
                $attributes  = ' class="tooltips"';
            }
            $class_names  = str_replace('tooltips', '', $class_names);
    
            $output .= "<li id='menu-item-$item->ID' $class_names>";
    
    
    
            ! empty( $item->attr_title )
                and $attributes .= ' title="'  . esc_attr( $item->attr_title ) .'"';
            ! empty( $item->target )
                and $attributes .= ' target="' . esc_attr( $item->target     ) .'"';
            ! empty( $item->xfn )
                and $attributes .= ' rel="'    . esc_attr( $item->xfn        ) .'"';
            ! empty( $item->url )
                and $attributes .= ' href="'   . esc_attr( $item->url        ) .'"';
    
            // insert description for top level elements only
            // you may change this
            $description = ( ! empty ( $item->description ) and 0 == $depth )
                ?    esc_attr( $item->description )   : '';
    
            $title = apply_filters( 'the_title', $item->title, $item->ID );
    
            $item_output = $args->before
                . "<a $attributes title='".$description."'>"
                . $args->link_before
                . $title
                . '</a> '
                . $args->link_after 
                . $args->after;
    
            // Since $output is called by reference we don't need to return anything.
            $output .= apply_filters(
                'walker_nav_menu_start_el'
            ,   $item_output
            ,   $item
            ,   $depth
            ,   $args
            );
        }
    }
    
    
    

    And update this wp_nav_menu code where your menu is called from theme [ header.php ]

    
        wp_nav_menu(
                        array (
                            'menu'            => 'main-menu',
                            'container'       => FALSE,
                            'container_id'    => FALSE,
                            'menu_class'      => '',
                            'menu_id'         => FALSE, 
                            'walker'          => new Tooltips_Walker
                        )
                    );
    

    and use “tooltips” – as menu item class and put the description to show as tips title.

    and make sure the “Zebra_Tooltip” Css class z-index is more then all element’s z-index: or add this css code in style.css

    .Zebra_Tooltip{ z-index: 100000 !important;}  
    

Comments are closed.