Tool tip in portal menu

Mohamed Faizel · ‎01-20-2015

Hi,

Is there any way to add tool tip or help text in portal menu sections?

Thanks.

ahaz86 · ‎01-20-2015

The changes I made are:

[Lines 3-18] I added a style (you would likely want to move this to a stylesheet)

[Lines 93-95] Added a condition to check for tooltip text. This is added before the </a> tag

Also, when you log in as admin on demo13, you may need to just click the lock icon and check the admin box

<?xml version="1.0" encoding="utf-8" ?>

<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">

<style>

.ess-tooltip{

display:none;

position: absolute;

width: 150px;

background-color: #FDFFAF;

border: 1px solid #CDCDCD;

padding: 5px;

color: #000;

box-shadow: 0px 6px 29px -15px #000;

margin-left: 5px;

}

.cms_menu_block_item:hover .ess-tooltip{

display: inline-block;

}

</style>

<g:evaluate>

var sectionGR = new GlideRecord('menu_section');

sectionGR.addQuery('content_block_menu', menuGR.getUniqueValue());

sectionGR.addQuery('active', 'true');

sectionGR.orderBy('order');

sectionGR.query();

</g:evaluate>

<g:cms_menu_functions />

<j:if test="${sectionGR.hasNext()}">

<div>

<j:while test="${sectionGR.next()}">

<j:if test="${canViewMenu(sectionGR)}" >

<j:if test="${!sectionGR.header.nil()}">

<tr>

<td colspan="3">${NS:sectionGR.header}</td>

</tr>

</j:if>

<j:if test="${!sectionGR.omit_body}">

<j:if test="${sectionGR.image.getDisplayValue()!=''}">

</j:if>

</td>

<g:cms_menu_set_url_and_target link_sysid="${sectionGR.getUniqueValue()}" />

<j:switch on="${jvar_link_url}">

<j:case value="">

<h2>${sectionGR.name.getDisplayValue()}</h2>

</j:case>

<j:default>

<h2><a href="${jvar_link_url}" target="${jvar_link_target}">${sectionGR.name.getDisplayValue()}</a></h2>

</j:default>

</j:switch>

<j:if test="${sectionGR.second_level_text!=''}">

<span class="cms_menu_second_level_text">${sectionGR.second_level_text.getDisplayValue()}</span>

</j:if>

</td>

<j:if test="${sectionGR.image_right.getDisplayValue()!=''}">

</j:if>

</td>

</tr>

<j:set var="jvar_t" value="${sectionGR.sys_id}" />

<g:evaluate jelly="true" >

var itemGR = new GlideRecord('menu_item');

itemGR.addQuery('menu_section', jelly.jvar_t);

itemGR.addQuery('active', 'true');

itemGR.orderBy('order');

itemGR.query();

</g:evaluate>

<j:if test="${itemGR.hasNext()}">

<tr>

<j:while test="${itemGR.next()}">

<j:if test="${canViewMenu(itemGR)}" >

<g:cms_menu_set_url_and_target />

<tr>

<td>

<j:if test="${itemGR.image.getDisplayValue()!=''}">

</j:if>

<j:if test="${itemGR.image.getDisplayValue()==''}">

</j:if>

</td>

<td>

<a class="cms_menu_block_item" href="${jvar_link_url}" target="${jvar_link_target}">${itemGR.name.getDisplayValue()}

<j:if test="${itemGR.u_tooltip_text!=''}">

<span class="ess-tooltip">${itemGR.u_tooltip_text}</span>

</j:if>

</a>

</td>

</tr>

</j:if>

</j:while>

</table>

</td>

</tr>

</j:if>

<j:if test="${!sectionGR.footer.nil()}">

<tr>

<td colspan="3">${NS:sectionGR.footer}</td>

</tr>

</j:if>

</table>

</div>

</j:if>

</j:while>

</div>

</j:if>

</j:jelly>

View solution in original post

ahaz86 · ‎01-20-2015

that is correct

Mohamed Faizel · ‎01-20-2015

its working fine. But the thing its showing in bold letters. Please find the screen shot.

ahaz86 · ‎01-20-2015

in the style ".ess-tooltip{" add a new line with "font-weight: normal"

Mohamed Faizel · ‎01-20-2015

Ok got it. One more thing, can we get the tooltip message in center? It showing in the right corner, i have another form in right side, so i could not get the full view of the text.

Mohamed Faizel · ‎01-20-2015

Hi Alex,

Everything is working fine, i just reduce the width size its working fine,

Thanks alex, I will mark this as an answer.:)