This is my first time to write a Jquery plugin, actually i expected this more difficult but its appear easy, and i am start learning from Jquery Documentation, and I recommend anyone need to learn basic, best practice and writing your plugin, to start by Jquery Documentation.

Now I want to talk about my plugin, lately increased requests from our clients to add page with their team member and add bubble to each one, so I thought to build a jquery plugin to serve me and anyone like this plugin, so the purpose from this plugin to add several hide bubbles in multiple locations on image and view this bubble on hover depend on the location you pass it.

Actually I will not go deeply to the plugin implementation, I want to just describe how to use it.

[button link=”http://islamzatary.com//demo/TeamToolTip/plugin.html” color=”teal” newwindow=”yes”] Demo[/button]    [button link=”https://github.com/islamzatary/TeamToolTip-JqueryPlugin” color=”teal” newwindow=”yes”] Source File[/button]


Here is the simple steps, how to use “TeamToolTip” plugin:

Prepare JSON File.

I am used JSON data format, because it’s an easy understand and to manipulate, so here is the JSON structure:

[
{
	"id" : "Islam-Al-Zatary",
	"desc" : "Description Goes Here! Description Goes Here! Description Goes Here! ",
	"name" : "Islam Al-Zatary",
	"job_title" :  "Front End Engineer",
	"left" : "314",
	"top" : "12"
}
]

So, its contain:

  1. Id, usually its its indicate to name of member without any space.
  2. Desc, it’s a description to the member.
  3. Name: member name.
  4. Job_title: member job title.
  5. Left: how much move tip from left.
  6. Top: how much move tip from top.

You can repeat it as you like to each member.

Calculate (Left & Top) to tip position.

There is Three ways:

  1. By Firebug Extension, actually i used this way by create initial point (0,0) will be added in JSON File, which mean 0: left and 0: top, after that by move the border by style in firebug.
  2. Image Map tag, get left & top from coordinate.
  3. By Photoshop, in the info widget when move cursor will see X changed,As X reflect to left.

Create html page, to include the plugin source:

so you need to include Jquery Core plugin, i tested it on 1.7.2, and include TeamToolTip plugin

in body tag, will put Team image inside div tag like:

</pre>
<div id="bayt_team_reprand"><img src="team2.jpg" alt="" /></div>

and to run the plugin, you must to put it in the load() function to ensure the image and DOM of page is fully loaded, if we use (document).ready() function, the plugin will not work for more info about this approach visit the following link: $(document).ready vs. $(window).load

&nbsp;

<script type="text/javascript">// <![CDATA[
// i have used $(window).load function instead of $(document).ready, becasue i want to ensure to fully page completed loaded.
$(window).load(function() {
$("#bayt_team_reprand").TeamToolTip({
                     JsonFile : 'team_memeber2.json',
                     ViewBorderFadeout : true,
                     TipPosition: 'left_right',
                     TipWidth : '220px',
                     TipBackground : '#FFCA4A',
                     TipBorderRadius : '12px'
});
});
// ]]></script>&nbsp;

View Full HTML Document

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" language="javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" language="javascript" src="jquery.TeamToolTip.1.0.js"></script>
<title>Team</title>
<style type="text/css">
	body {
		padding:50px;
		font-family:Arial, Helvetica, sans-serif;
	}
		
</style>
</head>

<body>
<div id="loading" style="display:none;"><img src="loading.gif" alt="" /></div>
<div id="bayt_team_reprand">
	<img src="team2.jpg" alt="" />
</div>
<script type="text/javascript">
// i have used $(window).load function instead of $(document).ready, becasue i want to ensure to fully page completed loaded.
$(window).load(function() {
	$("#bayt_team_reprand").TeamToolTip({
										JsonFile : 'team_memeber2.json',
										ViewBorderFadeout : true,
										TipPosition: 'left_right',
										TipWidth : '220px',
									  	TipBackground : '#FFCA4A',
									 	TipBorderRadius : '12px'
	});
});
</script>
</body>
</html>

Finally you can link on any character and get the link after addd hash id and share your bubble with your friend

You Can Use this plugin to several uses like Facebook tags, tool tip to each input field and like locations in map.

[box type=”info”] This Plugin Tested on all majot Browsers: 1. Chrome v 19
2. Firefox v 12
3. Opera v 11.64
4. IE v 7 + 8[/box]

I hope to listen any enhancement or comment about this plugin.

[button link=”http://islamzatary.com//demo/TeamToolTip/plugin.html” color=”teal” newwindow=”yes”] Demo[/button] [button link=”https://github.com/islamzatary/TeamToolTip-JqueryPlugin” color=”teal” newwindow=”yes”] Source File[/button]

16 thoughts on “TeamToolTip – Jquey Plugin

  1. Very nice thank you.

    Can you add an image for the work or maybe a demo j

    1. Thank You Alaa,

      yes you can, the purpose from this plugin to add several hide bubbles in multiple locations on image and view this bubble on hover depend on the location you save it in JSON file.

      and this plugin similar to what i worked bayt rebrand team page, please visit the following link: rebrand team

      I hope i answered your question.

  2. Hello, Neat post. There is an issue with your web site in web explorer, might check this? IE still is the marketplace leader and a large part of other people will pass over your fantastic writing due to this problem.

    1. Thanks abercrombie, appreciated you comment, yeah there is an issue in IE7, i will fix it soon 🙂

  3. Nice post. I used to be checking continuously this weblog and I am impressed! Extremely helpful info specially the remaining part 🙂 I care for such information a lot. I used to be looking for this certain information for a lengthy time}. Thank you and best of luck.

  4. thank you for sharing with us, I believe this website really stands out : D.

    1. It抯 remarkable in support of me to have a web site, which is good in favor of my know-how. thanks admin

  5. You actually make it seem so easy with your presentation but I find this topic to be really something that I think I would never understand. It seems too complicated and very broad for me. I’m looking forward for your next post, I will try to get the hang of it!

  6. Great post, this is one of my favourite topics and close to my heart.LOL.

  7. I have been surfing online more than three hours today, yet I never found any interesting article like yours. It is pretty worth enough for me. Personally, if all website owners and bloggers made good content as you did, the internet will be much more useful than ever before.

  8. Many thanks a whole lot for sharing! I will definitely be back.

  9. Hi colleagues, I am for a second time at this place, and reading this post related to Search engine optimization, its also a nice paragraph, so keep it up.

  10. This info is worth everyone’s attention. When can I find out more?

    my webpage: Human Anatomy

  11. I believe that is among the so much significant information for me.
    And i’m glad studying your article. However should commentary on few
    general things, The website taste is wonderful, the articles is in point of
    fact nice : D. Good activity, cheers

    my blog – Anatomy blog

  12. Its like you read my mind! You seem to understand so much about this, such as you
    wrote the book in it or something. I believe that
    you simply could do with some % to force the message home a bit, but
    instead of that, that is great blog. An excellent read. I will definitely be
    back.

    Look at my blog post :: Anatomy blog – Julius,

Leave a Comment