Tool tip in portal menu

Go to solution
Mohamed Faizel
Giga Expert

‎01-20-2015 04:40 AM

Hi,

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

Thanks.

0 Helpfuls
  • 3,719 Views
1 ACCEPTED SOLUTION

Go to solution
ahaz86
Mega Guru
In response to Harish Murikina

‎01-20-2015 06:11 AM

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>


View solution in original post

0 Helpfuls
21 REPLIES 21

Go to solution
Harish Murikina
Tera Guru

‎01-20-2015 04:46 AM

please send the screen shot where you wants to show   help text


0 Helpfuls

Go to solution
Mohamed Faizel
Giga Expert
In response to Harish Murikina

‎01-20-2015 05:11 AM

Menu section.png


Ex: When you move over the cursor to "hardware" in order things we have to show the tool tip "you can raise a hardware request here" like that.


Preview file
145 KB
0 Helpfuls

Go to solution
Harish Murikina
Tera Guru
In response to Mohamed Faizel

‎01-20-2015 05:16 AM

Not sure its feasible . Let try to do this requirement .


0 Helpfuls

Go to solution
ahaz86
Mega Guru
In response to Mohamed Faizel

‎01-20-2015 05:55 AM

This is possible, the problem is that you would have to modify the horizontal blocks ui macro which would mean you own it and it will no longer receive updates from servicenow upgrades. You will also need to add a new field on the items table.



I created this in a demo environment, use the following login


https://demo013.service-now.com/login.do


user:admin


pass:admin


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


hover over the hardware item.



UI Macro that is modified


Menu Item that was modified



Let me know if you need some more help on this.



Alex


0 Helpfuls