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

No problem, let me know if you run into any other issues with this.

sriramavinash · ‎09-21-2015

Hi Alexander,

Do we need to create a new stylesheet for this or induce in the current menu stylesheet?. as don't see any jelly script used in the current style sheets.

sriramavinash · ‎09-22-2015

Hi Mohamed,

Can you please share how did you this requirement? Where did you place the code provided by Alexander?

Mohamed Faizel · ‎09-22-2015

Added the new field Tooltip text(u_tooltip_text) in the Menu item

https://demo015.service-now.com/nav_to.do?uri=menu_item.do?sys_id=5770d232c0a8016b010d0fd23f318957

Then go to UI MACRO and find the macro "cms_menu_horizontal_blocks" and "cms_menu_section_blocks"update with above code provided by alex

https://demo015.service-now.com/ess/

sriramavinash · ‎09-22-2015

Thanks Mohamed....