Real Stories From Our Customers

Head over to our Case Studies page to read about our projects and hear directly from our customers about their experience with SynaTree.

Read Case Studies

Working With Us Is Easy

SynaTree offers tools that make collaboration on your project effortless. SynaTree Share makes you a part of the team, while Tracker puts you in control of your project.

Learn More

Wiki-Search Functionality

Inline Wikipedia Search

For SynaTree.com, where we knew we would be using alot of technical terminology, we wanted to provide hints to the user to find a definition on Wikipedia, but we didn't want to do a lot of hard-coding links which would be terribly tedious.

We came up with wiki-search, a combination of CSS style, JavaScript, and WYSIWYG editor markup that accomplishes what we wanted.

We start with the standard abbr tag in HTML, which can take a title property. Our WYSIWYG lets us put in abbr tags, so we just wrapped any technical term in one. We make the title property the Wikipedia article title, the language attribute be the wikipedia language, and the text inside the abbr tag be the title of the wiki-search tooltip.

We then build a simple Tooltip with a link to the Wikipedia article inside. Finally, we add some CSS style to the abbr to make the whole thing look nice.

First, the markup:

<abbr class="wiki-search" lang="en" title="Wikipedia_Article_Title">Wikipedia Article</abbr>

Next, the very small JavaScript.


$$('abbr.wiki-search').each(function(abbr){
		var Tip = new Tips( abbr, 
		{
			title: Function.from( abbr.get('text') ),
			text:  Function.from(
				"<span style='font-weight:bold'>&laquo;{term}&raquo;</span> on <a href='http://{lang}.wikipedia.org/wiki/Special:Search?search={term}' target='_blank'>Wikipedia ({lang})</a>".substitute({lang: abbr.get('lang') || 'en', term: abbr.get('title')? abbr.get('title') : abbr.get('text')})
			),
			id: String.uniqueID(),
			wiaAria: true,
			fixed: true,
			hideDelay: 100,
			onHide: function(tip, hovered){
				var TIMER = null;
				var hider = function(){tip.setStyle('display','none')};
				var wait = function(){
					clearTimeout(TIMER);
				};
		
				var cont = function(){
					TIMER = hider.delay(00);
				};

				tip.addEvent('mouseover', wait);
				tip.addEvent('mouseout', cont);
				cont.delay(8000);
			},
			offset: {x: 10, y:25}
		});
	});

And finally, the CSS, including a very handy data-url image.

abbr.wiki-search
{
padding-left: 10px;
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAPFJREFUeNqEkLFqg1AUhv9Ip9tFG5S6iDipm+CWQvsOLoJr+kgpJA/gA/ROvYsOcXPoJNQE0oZbECq+gBdue21Ct/QfDpxzPjj/f2byR7ish6tttYUYBcIwRFmWWNwtwDnH/GYO/snRf/XQVLPerKHrOugzBXth2O/2MAwDx48jXNeFFgTBRKvB8nGJPM9h39oYx3EC4jiGpo6maQpKKaIogmmaINcEh/cDLMuaTE1QkiQoigLtWwvP88AYw9APcBznD1J+fN/H6mmFLMvQ7lqo0ISQ33zypKZpZFVVUggh67qWXdedV/czVf750+u3AAMAYpNvdO7S868AAAAASUVORK5CYII=");
background-repeat: no-repeat;
background-position: left center;
background-color: transparent;
border-bottom-color: #D6C;
}