How It Works

service automatically searches your page for uncommon terms used on it and shows explaining tooltips. This is done by integrating a java script code into your page that accesses our server to analyse the page text to see if it can be tagged for a tooltip service. By the way, this page is also set to use tooltips and as you can see we don't add the question marks to the terms here.

You can setup our service to work with your pages within just a matter of minutes. Here is what you need to do.

Setup Script and CSS Links

You setup web-site pages by adding javascript and CSS links. Our service client is implemented using jQuery framework, so it is as simple as adding a regular jQuery plugin. By default, our service also uses qTip2 jQuery plugin to render tooltips.

<link href="//cdnjs.cloudflare.com/ajax/libs/qtip2/2.1.1/jquery.qtip.min.css" rel="stylesheet"/>
<link href="//cdn.explainterm.com/css/jquery.termex.min.css" rel="stylesheet" />

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/qtip2/2.1.1/jquery.qtip.min.js"/>
<script src="//cdn.explainterm.com/s/jquery.termex.min.js" />"

Select Language and Contex

Provide context ID and page's locale to the function termex() of jQuery selector. You can utilize our get code page to find context and locale.

<p> This text is included into search by jQuery selector below.</p>

<script type="text/javascript">
	$("p").termEx(
	{
		locale: "en-us",
		context: 1
	});
</script>

Use Markup

You can also markup your page with HTML 5 data attribute data-termex="include". To exclude some page areas that were selected within a wider scope, please use data-termex="exclude" or assign to an element class named termex-exclude. Use the alternative initialization code for this without a need to use jQuery selectors as shown below.

<div data-termex="include">

	This text is included into search by data-termex="include" attribute.

	<span data-termex="exclude">
		This text is excluded from search by data-termex="exclude" attribute.
	</span>

	<span class="termex-exclude">
		This text is excluded from search by class="termex-exclude" attribute.
	</span>
 
</div>
 
<script type="text/javascript">
	$.termEx.start(
	{
		locale: "en-us",
		context: 1
	});
</script>

Customize

Optionally, you can customize the look and feel by replacing default CSS files or overriding style classes in the plugin's options. Here is the full list of options with default values:

<script type="text/javascript">
	$("p").termEx(
	{
		locale: "en-us", // page locale
		context: null, // context id
		showIcon: true, // adds interactable icon at the end of term
		highlightTerm: true, // the whole term becomes interactable, if this option is disabled, showIcon must be true.
		termClass: "termex-term", //class to use for fist occurences of a term
		termClassSkip: "termex-term-skip", // class to use for all other occurrences of a term
		iconClass: "termex-icon", // class that defines icon appearence
		excludeClasses: ["termex-exclude"], // containers with this classes assigned are excluded from term search
		lazyLoad: false, //instructs client to avoid pre-loading tooltip texts.
		tooltipOptions: {style: {classes: "qtip qtip-blue"}}, // tooltip options to be passed to tooltip adapter. qtip is used by default.
	});
</script>
Get Sample Code