Tool tip in portal menu

[Mohamed Faizel]

Hi,

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

Thanks.

[Harish Murikina]

Alex can you send the macro code not able to open that page

[Mohamed Faizel]

Harish its working, activate high security privileges and click on the link

[Harish Murikina]

Mark answer correct and close the loop please. Its great work by Alexander Hazlett

[ahaz86 · Accepted solution]

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)}" >

              <div class="cms_menu_section_blocks">

                      <table cellpadding="0" cellspacing="0" width="100%" class="background_transparent">

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

                              <tr>

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

                              </tr>

                          </j:if>                      

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

                          <tr class="cms_menu_section_blocks_title_row">

                              <td class="cms_menu_section_blocks_image_left">                                              

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

                                          <img class="cms_menu_section_blocks_image_left" src="${sectionGR.image.getDisplayValue()}" />

                                      </j:if>

                              </td>

                              <td class="cms_menu_section_blocks_title">

                                      <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>

                              <td class="cms_menu_section_blocks_image_right">                                              

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

                                          <img class="cms_menu_section_blocks_image_right" src="${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>

                                      <td colspan="3">

                                      <p class="cms_menu_separator" />

  <table class="background_transparent">

      <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()!=''}">

  <img src="${itemGR.image.getDisplayValue()}" align="left" class="menu_bullet"/>

  </j:if>

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

  <img src="bullet.pngx" align="left" class="menu_bullet"/>

  </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>

  <!-- <h2>${current.short_description();}</h2> -->

  </td>

  </tr>

                                                          </j:if>

      </j:while>

  </table>

                                      </td>

                              </tr>

                          </j:if>

                          </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>

              <div style="clear:both;"/> <!-- untangle floating divs -->

  </j:if>

</j:jelly>

[Harish Murikina]

Thank you.

It seems you have created new field called "u_tooltip_text" let me know if im wrong.