---

sTips jQuery Plugin Examples

Basic:

JS Code:

	
$("#Demo1").sTips()
	

HTML Code:

	
< span title="Tooltip Content Here" id="Demo1">This is a basic Tooltip< /span>
	

This is a basic Tooltip

---

DEMO2: Follow Cursor

JS Code:

	
$("#Demo2").sTips({
	mouse:2
})
	

HTML Code:

	
< span title="Demo2: {||} Follow Cursor" id="Demo2">This is a tooltip< /span>
	

This is a tooltip

---

DEMO3: Multiple Tooltips

JS Code:

	
$(".Demo3").sTips()
	

HTML Code:

	
< span title="Demo3: {||} Tooltip 1" class="Demo3">Tooltip 1< /span> < span title="Demo3: {||}Tooltip 2" class="Demo3">Tooltip 2< /span> < span title="Demo3: {||}Tooltip 3" class="Demo3">Tooltip 3< /span>
	

Tooltip 1 Tooltip 2 Tooltip 3

---

DEMO4: AJAX

JS Code:

	
$("#Demo4").sTips()
	

HTML Code:

	
< span title="Demo4: {||}ajax:demo.html" id="Demo4">AJAX Content< /span>
	

AJAX Content

---

DEMO5 : JS Function

JS Code:

	
function test(s){
	return s
}
$("#Demo5").sTips()
	

HTML Code:

	
< span title="Demo5：{||}fn:test('This is a function')" id="Demo5">JS Function< /span>
	

JS Function

---

Default Options

JS Code:

	
$("#demo").sTips({

  // opacity (0-1)
  phy:1,

  // fade animation
  inTime:200,
  outTime:200,

  // default CSS classes
  sTipsCss:"sTips"
  topCss:"sTip-Top",
  bodyCss:"sTips-Body",

  // ajax error message
  ajaxError:"",

  // loading indicator
  ajaxLoading:"loading...",

  // posiiton
  position:2,

  // the distance between tooltip and cursor
  mousez:10,

  // 1: Top left
  // 2: Top right
  // 3: Bottom right
  // 4: Bottom left
  mouse:0

});