DIV CSS 佈局教程網

繼續分享一個我自己寫的 ToolTip提示插件，希望大家支持我，給我點評論，哪怕罵我的也好啊，讓我知道有人在關注我“小豆” 嘿嘿。廢話不多說上代碼！
. 代碼如下:
$.fn.ToolTip = function (option) {
var defaults = {
direction: "down",
star: function () { },
from: $(this),
url: '../images/arrow.png'
};
//方法內基礎變量
var opt = $.extend(defaults, option),
dirarray = ['up', 'down', 'left', 'right'],
left = 0, top = 0, _left = 0, _top = 0, arrow_w = 15, arrow_h = 60, timeout, arrow = '0 0';
//開始遍歷
$(this).each(function () {
var obj = $(this);
obj.on({
mouseenter: function () {
GetPos(obj);
var objtip = $("<div class='tooltip'></div>").css({
position: "absolute",
top: top,
left: left,
border: "solid 1px #ccc",
width: $("#" + obj.attr("data-tooltip")).outerWidth(true),
height: $("#" + obj.attr("data-tooltip")).outerHeight(true),
'border-radius': '8px 8px',
'background-color': '#fff',
'z-index': 999
}).appendTo(obj);
var objtiphead = $("<div></div>").css({
width: arrow_w == 30 ? objtip.outerWidth(true) : 15,
height: arrow_h == 30 ? objtip.outerHeight(true) : 15,
position: "absolute",
top: _top,
left: _left
}).appendTo(objtip);
var objtiparrow = $("<div></div>").css({
width: arrow_w,
height: arrow_h,
"background-image": "url(" + opt.url + ")",
"background-repeat": "no-repeat",
"background-position": arrow
}).appendTo(objtiphead);
objtip.append($("#" + obj.attr("data-tooltip")).clone().show());
objtip.on({
mouseenter: function () {
obj.data({
attip: true
});
}, mouseleave: function () {
$(".tooltip").remove();
obj.removeData("attip");
}
});
}
, mouseleave: function () {
if (!obj.data("attip"))
$(".tooltip").remove();
obj.removeData("attip");
}
});
});
//得出位置
var GetPos = function (obj) {
var objtip = $("#" + obj.attr("data-tooltip"));
var tooltippos = {
up: function () {
arrow_w = 30; arrow_h = 15;
top = obj.position().top - 12 - objtip.outerHeight(true);
left = obj.position().left;
_top = objtip.outerHeight(true);
_left = 15;
arrow = '-50px -50px';
},
down: function () {
arrow_w = 30; arrow_h = 15;
top = obj.position().top + 12 + obj.height();
left = obj.position().left;
_top = -15;
_left = 15;
arrow = '-50px 0';
},
right: function () {
arrow_w = 15;
arrow_h = 30;
top = obj.position().top;
left = obj.position().left - 12 - objtip.outerWidth(true);
_top = 15;
_left = objtip.outerWidth(true);
arrow = '-80px -20px';
},
left: function () {
arrow_w = 15;
arrow_h = 30;
top = obj.position().top;
left = obj.position().left + obj.width() + 12;
_top = 15;
_left = -15;
arrow = '0 -20px';
}
};
opt.star();
opt.direction = $.inArray(opt.direction, dirarray) != -1 ? opt.direction : "down";
switch (opt.direction) {
case "up":
if (obj[0].getBoundingClientRect().top - 10 - objtip.outerHeight() > 0)
tooltippos.up();
else
tooltippos.down();
break;
case "down":
if (obj[0].getBoundingClientRect().top + 10 + obj.height() + objtip.outerHeight() < $(window).height())
tooltippos.down();
else
tooltippos.up();
break;
case "right":
if (obj[0].getBoundingClientRect().left - 10 - objtip.outerWidth() > 0)
tooltippos.right();
else
tooltippos.left();
break;
case "left":
if (obj[0].getBoundingClientRect().left + obj.width() + 10 + objtip.outerWidth() < $(window).width())
tooltippos.left();
else
tooltippos.right();
}
}
}

經測試，好像IE7 箭頭有指向錯誤，大家可以修改下。小問題啦，灑灑水啦~
效果圖：

當然，裡面是什麼內容，那就要自己創造了，我只是寫了一個展示div，用法很簡單的。
源碼下載
操作說明是對用戶體驗師的侮辱！