Setting the "title" attribute of main menu link items (or page names)

Question

I'd like to have tool tips when I mouse over the main menu items in Liferay. By default, there is no way to do this. Even in the *.vm files, the mark up does not include any title attribute for the links.

The way I'm trying to go about it is to have a custom attribute defined for a page. This gives me an interface in Liferay itself to enter title values I may want. I am then planning to use this value as the title value for the menu links. Not sure if this will work though.

Is there a better way that I don't know of?

Answer 1

The correct answer is in the direction I was going originally. Create a custom field related to a page and then use that in the velocity template. Here is the entire code for the navigation menu where menuTitle is the name of my custom variable:

<nav class="$nav_css_class" id="navigation">
    <h1>
        <span>#language("navigation")</span>
    </h1>

    <ul>
        #foreach ($nav_item in $nav_items)
            #if ($nav_item.isSelected())
                <li class="selected">
            #else
                <li>
            #end
                <a title="$nav_item.getLayout().getExpandoBridge().getAttribute("menuTitle")" href="$nav_item.getURL()" $nav_item.getTarget()><span>$nav_item.icon() $nav_item.getName()</span></a>

                #if ($nav_item.hasChildren())
                    <ul class="child-menu">
                        #foreach ($nav_child in $nav_item.getChildren())
                            #if ($nav_child.isSelected())
                                <li class="selected">
                            #else
                                <li>
                            #end
                                <a title="$nav_child.getLayout().getExpandoBridge().getAttribute("menuTitle")" href="$nav_child.getURL()" $nav_child.getTarget()>$nav_child.getName()</a>
                            </li>
                        #end
                    </ul>
                #end
            </li>
        #end
    </ul>
</nav>

Answer 2

Then I think you can use the HTML Title for the page description as shown in the figure:

And you can use this ($nav_item.getTitle()) in the title attribute of <a> tag of your custom theme's navigation.vm as @Sharana mentions:

<a title="$nav_item.getTitle()" href="$nav_item.getURL()" $nav_item.getTarget()><span>$nav_item.icon() $htmlUtil.escape($nav_item.getName())</span></a>

You can also use this ($nav_item.getLayout().getHTMLTitle($locale)):

<a title="$nav_item.getLayout().getHTMLTitle($locale)" href="$nav_item.getURL()" $nav_item.getTarget()><span>$nav_item.icon() $htmlUtil.escape($nav_item.getName())</span></a>

I would prefer this approach as it is much cleaner since it does not involve adding a new custom field and the work is done using what is already present in liferay and reduces a call to expando (may be this does not matter that much).

Hope this helps in giving you some lead.

Answer 3

Why you think there is no way to do this in navigation.vm?

below is the code from navigation.vm

<a href="$nav_item.getURL()" $nav_item.getTarget()><span>$nav_item.icon() $htmlUtil.escape($nav_item.getName())</span></a>

if you add title attribute to this,

<a title="$htmlUtil.escape($nav_item.getName())" href="$nav_item.getURL()" $nav_item.getTarget()><span>$nav_item.icon() $htmlUtil.escape($nav_item.getName())</span></a>

It works.

similarly for children items.

Answer 4

Both solutions are good.

It just depends on if the tool tip text needs to be different than the html page title. If it does, go the custom attribute route. If it doesn't, reuse the html title method.

Forgive me if I'm missing something here. If I am, please clarify.