Tweet



 
A very easy to use, cross platform, jQuery based UI toolkit, that’s still small in size, has the features you need, and doesn’t get in your way of doing things! Put jQuery and jKit on all your pages and HTML becomes so much better. And the best thing? You really don’t have to be a programmer to create a trully amazing website! jKit has 99% of all the features you ever need. You don’t have to check out dozens of plugins, learn how to use them, only to find out they don’t work in a specific browser. And even if jKit doesn’t have that one feature you need right now, jKit is fully extendable with plugins and command replacements, all that and your API always stays the same.

Hi, stranger

jKit is growing almost daily, if you don’t find what you need, let us know with a post on the community forum or our social pages. Hey, who knows, maybe it’s already on our ToDo list.

Content Summary

jKit Button

If you like jKit, use and want to support the project, here’s a small button you can use to link to the jKit website.

Btw, if you did something really nice with jKit, send us a link to your work and if we like it, we would sure love to feature it.

Tooltip command

Show additional information on hovering a link.

Basic Usage (HTML)

data-jkit="[tooltip:text=Your tooltip text]"

Advanced Init (JavaScript)

$('#myelement').jKit('tooltip', { 'text': 'Your tooltip text' });

Options

OptionValuesDefaultDescription
textHTMLThe HTML text to display inside the tooltip
contentjQuery selectorAn optional element that contains the content
colorHex Color#fffThe color of the tooltip text
backgroundHex Color#000The color of the tooltip background
classnameStringCSS class to apply on the tooltip
follow“yes” or “no”noFollow the mouse or not?
eventString “mouse” or “focus”mouseOn what kind of event to show the tooltip?
yoffsetInt20Tooltip offset on the Y axis.

Events

EventDescription
openTriggered when the tooltip is shown
closedTriggered when the tip is closed

Examples

Basic example:

Some basic tooltips showing the different styling options:

Test Link     Test Link 2     Test Link with a class for styling
Source:
<a href="#" data-jkit="[tooltip:color=#fff;background=#999;text=Test Tooltip Text]">Test Link</a>     
<a href="#" data-jkit="[tooltip:color=#333;background=#E01B49;text=Test Tooltip Text 2]">Test Link 2</a>    
<a href="#" data-jkit="[tooltip:classname=mytooltip;text=Test Tooltip Text 3]">Test Link with a class for styling</a>

Advanced example:

Some more examples showing the other options available:

Content from a hidden div     Text from title attribute     Text from alt attribute     Follow the mouse
Source:
<a href="#" data-jkit="[tooltip:content=#tooltipcontent]">Content from a hidden div</a>    
<a href="#" data-jkit="[tooltip]" title="Test Tooltip Text 4">Text from title attribute</a>     
<a href="#" data-jkit="[tooltip]" alt="Test Tooltip Text 5">Text from alt attribute</a>     
<a href="#" data-jkit="[tooltip:follow=yes;text=Test Tooltip Text 6]">Follow the mouse</a>
<br />
<input type="text" name="test" data-jkit="[tooltip:event=focus;text=Test Tooltip Text 7]">
<div id="tooltipcontent" style="display:none">
	<h4>Header</h4>
	<p>Paragraph</p>
</div>

Example CSS

div#jkit-tooltip {
	padding: 4px;
	padding-left: 8px;
	padding-right: 8px;
	position: absolute;
}
.mytooltip {
	background: #333;
	color: #fff;
	padding: 6px;
	padding-bottom: 5px;
	opacity: 0.9;
	border: 1px #E01B49 solid;
	-moz-border-radius: 3px;
	border-radius: 3px;
	-webkit-box-shadow:0 0 5px #aaa; 
	-moz-box-shadow: 0 0 5px #aaa; 
	box-shadow:0 0 5px #aaa;
}

Replacements

There are currently no replacements for this command.

[ Learn more about replacements ]

 

Discussions

Do you have questions or do you want to suggest new features? Than head over to our new community:

[ jKit Community ]