Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

jQuery Wiki Plugin to Show Wikipedia Description in Tooltips

Aug 31, 2013
Introduction:

Here I will explain how to use jQuery wikiup plugin to show or display wikipedia description in tooltips or show Wikipedia information related to word or string using jQuery wikiup plugin.

Description:
  
In previous articles I explained
create simple tooltip with jQuery UI, show gridiview row details in tooltip on mouseover, jQuery Simple Slideshow example, jQuery image slideshow with text overlay, jQuery image slideshow with next and previous buttons and many articles relating to JavaScript, jQuery, asp.net. Now I will explain how to show Wikipedia information related to word or string using jQuery wikiup plugin.

To implement this we need to write the code like as shown below


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery plugin to show wikipedia description in tooltips</title>
<link href="wikiUp.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="wikiUp.js" type="text/javascript"></script>
</head>
<body>
<data data-wiki="Apple Inc."><b>Apple</b></data> was founded by <data data-wiki="Steve Jobs"><b>Steve Jobs</b></data>.
<data data-wiki="Madrid" data-lang="es"><b>Madrid</b></data> es la capital de EspaƱa.
</body>
</html>
If you observe above code in header section I added files “wikiUp.css” and “wikiUp.js” files by using these files we can show Wikipedia description in tooltips when hover on particular word and we need to declare words with data-wiki property to identify words with wikiUp plugin to display Wikipedia description with tooltips like as shown below

<data data-wiki="Apple Inc.">Apple</data>
You can get above added css and script files from attached sample code or from this url wikiUp plugin.

Demo


Download Attached Sample Code

If you enjoyed this post, please support the blog below. It's FREE!

Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

subscribe by rss Subscribe by RSS subscribe by email Subscribe by Email

2 comments :

Irtekaz Ahmed Khan said...

beautiful function but other how to my creat as Wikipedia function

Anonymous said...

Is there a way I could get the info on page load instead of mouse over?
Thank you.

Give your Valuable Comments

Other Related Posts

© 2010-2012 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.