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,726 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
Mohamed Faizel
Giga Expert
In response to sriramavinash

‎09-22-2015 06:23 AM

No Problem. Have you got it?


0 Helpfuls

Go to solution
sriramavinash
Kilo Explorer
In response to Mohamed Faizel

‎09-24-2015 03:36 AM

Yes got it and its working...Thank you once again.


0 Helpfuls