How to Add Help Button Next to SharePoint Field Name

Hi friends, in this post we will see: How to add Help button next to SharePoint List column name. We usually see help buttons while filling online forms. Such help buttons notifies users what values they need to enter in the field. So let us see how to add help button in SharePoint list using SharePoint Designer 2013.

Add Help Button
Add Help Button

 

Step 1: Open your list in SharePoint Designer and find the <tr> tag for your field. You can see two <td> tags under <tr> tag. We have to add one more <td> tag for help button. Just copy the below code (red colored) after ending second </td> tag. In this case, I have list named TestList and I am going to add Help button in front of First Name column. So our overall code for First Name field will look like:

<tr> 
  <td width="190px" valign="top" class="ms-formlabel"> 
    <H3 class="ms-standardheader"> 
     <nobr>First Name</nobr> 
    </H3> 
  </td> 
  <td width="400px" valign="top" class="ms-formbody"> 
    <SharePoint:FormField runat="server" id="ff2{$Pos}" ControlMode="New" FieldName="First_x0020_Name" __designer:bind="{ddwrt:DataBind('i',concat('ff2',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@First_x0020_Name')}"/> 
    <SharePoint:FieldDescription runat="server" id="ff2description{$Pos}" FieldName="First_x0020_Name" ControlMode="New"/> 
  </td> 
  <td> 
    <div class="help-tip"> 
      <p>Please enter your name in CAPITAL letters</p> 
    </div> 
  </td> 
</tr> 

Step 2: Now we have to include css for this help button. So there are two ways to use css here. Either create separate css file and upload it in style library, then link that file here or directly copy following css (red colored) after following code (green colored).

 <script>  
      var elm = document.getElementById(&quot;idAttachmentsTable&quot;);  
      if (elm == null || elm.rows.length == 0)  
      document.getElementById(&quot;idAttachmentsRow&quot;).style.display=&apos;none&apos;;  
 </script>  
 <style type="text/css">  
 .help-tip{  
      text-align: center;  
      background-color: #BCDBEA;  
      border-radius: 50%;  
      width: 24px;  
      height: 24px;  
      font-size: 14px;  
      line-height: 26px;  
      cursor: default;  
 }  
 .help-tip:before{  
      content:&apos;?&apos;;  
      font-weight: bold;  
      color:#ffff;  
 }  
 .help-tip:hover p{  
      display:block;  
      transform-origin: 100% 0%;  
      -webkit-animation: fadeIn 0.3s ease-in-out;  
      animation: fadeIn 0.3s ease-in-out;  
 }  
 .help-tip p{     /* The tooltip */  
      display: none;  
      text-align: left;  
      background-color: orange;  
      padding: 20px;  
      width: 300px;  
      border-radius: 3px;  
      box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);  
      right: -4px;  
      color: #FFF;  
      font-size: 13px;  
      line-height: 1.4;  
 }  
 .help-tip p:before{ /* The pointer of the tooltip */  
      position: absolute;  
      content: &apos;&apos;;  
      width:0;  
      height: 0;  
      border:6px solid transparent;  
      border-bottom-color:#1E2021;  
      right:10px;  
      top:-12px;  
 }  
 .help-tip p:after{ /* Prevents the tooltip from being hidden */  
      width:100%;  
      height:40px;  
      content:&apos;&apos;;  
      position: absolute;  
      top:-40px;  
      left:0;  
 }  
 /* CSS animation */  
 @-webkit-keyframes fadeIn {  
      100% {   
           opacity:1;   
           transform: scale(1);  
      }  
      0% {  
           opacity:0;  
           transform: scale(0);  
      }  
 }  
 @keyframes fadeIn {  
      0% { opacity:1; }  
      100% { opacity:0; }  
 }  
 </style>  

If you like this article, please share it with your friends and like or facebook page for future updates. Subscribe to our newsletter to get notifications about our updates via email. If you have any queries, feel free to ask in the comments section below. Have a nice day!

Leave a Reply

Your email address will not be published. Required fields are marked *