Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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.

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.

share|improve this question
add comment

1 Answer

up vote 1 down vote accepted

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;}  
share|improve this answer
    
"and use "tooltips" - as menu item class and put the description to show as tips title." - I've added "tooltips" (without quotes) as the CSS Classes and text for the Title Attribute under the Appearance > Menu screen but nothing's changed. –  annabwashere Jul 11 '13 at 15:10
    
Did you add the code in functions.php and update the wp_nav_menu.. code in header.php ? ; Also can i have the link of your website. –  Shahinul Islam Jul 11 '13 at 15:16
    
Yes, all of that. The site is on a local server, sorry. –  annabwashere Jul 11 '13 at 19:30
    
I've got it working on the default WP themes. I guess I have to figure out how to get it working on my theme. Thanks! –  annabwashere Jul 13 '13 at 12:56
    
If you have Firebug or Google Crome browser Developer tools you may check for the Javascript error on your theme. –  Shahinul Islam Jul 13 '13 at 13:56
show 1 more comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.