Simple JQuery Tooltip Plugin for SharePoint Page Content Sections – Colortip

Tooltip control is a great way to display additional information in web sites without making the web page larger and improving user experience and usability.

There are so many jQuery plugins that we can find, like in this list. Most of them require us to add supporting file like JS, CSS and images to the developing web site in order to use the tooltip control.

One of the common approaches used in jQuery plugins is to call to a JavaScript function, passing few parameters including tooltip content whenever we want to display a tooltip. Those tooltip plugins won’t much helpful when comes to use them in SharePoint Page Content sections since some html segments like scripts will get striped in page content sections upon saving.

We can use either SharePoint 2013 script editor webpart or Content Editor webpart with a referring text file as an alternative. But neither of them gives the flexibility of editing content as Page Content sections provide.

JQuery plugins like Colortip comes in handy in this type of situation.

Step 1:

Download ColorTip plugin form the tutorialzine site. Upload colortip-1.0-jquery.css and colortip-1.0-jquery.js file to a document library. There are no images to be uploaded.

Step 2:

Add the following script section in the page using a Script Editor webpart or any other mechanism. This includes the references to the plugin resources (update as necessary), popup trigger and additional condition to prevent plugin from running/modifying content in edit mode of the SharePoint page.

<scriptsrc="//code.jquery.com/jquery-1.11.0.min.js"></script>

<scripttype="text/javascript"src="/_catalogs/masterpage/colortip-1.0-jquery.js"></script>

<linktype="text/css"href="/_catalogs/masterpage/colortip-1.0-jquery.css"rel="stylesheet">

 

<script>

$(document).ready( function() {

   var inEditMode = document.forms[MSOWebPartPageFormName].MSOLayout_InDesignMode.value;

   if(inEditMode !="1") {

  $( '.mypopup[title]' ).colorTip({ color: 'blue'});

  }

});

</script>

Step 3:

Include anchor tags where the popup needs to display. Title is the popup text. Class ‘mypopup’ is used to trigger the popup.

Lorem Ipsum is<atitle="Popup on dummy text"class="blue mypopup">simply dummy text</a>of the printing and typesetting industry.

This is how it looks: 

There is a demo of ColorTip plugin in here.

Note: For SharePoint wiki pages, in order to find if the page is in Edit mode from JavaScript, use following condition:

var inEditModeWiki = document.forms[MSOWebPartPageFormName]._wikiPageMode.value;

if(inEditModeWiki =="Edit")

{

  // trigger popup

  $( '.mypopup[title]').colorTip({ color:'blue'});

}