自分で作成したツールヒント プロンプト プラグインを共有する (ソース コード付き)_jquery

私は自分で書いた ToolTip プロンプト プラグインを共有し続けます。みんなが私をサポートしてコメントを残してくれることを願っています。たとえ叱られても、誰かが私に注目していることを知らせてください。「Xiaodou」ふふ。早速、コードについて話しましょう。

コードをコピー コードは次のとおりです。

$.fn.ToolTip = function (オプション) ) {
var defaults = {
direction: "down",
star: function () { },
from: $(this),
url: '../images/ arrow.png '
};
//メソッド内の基本変数
var opt = $.extend(defaults, option),
dirrray = ['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 = $("

").css({
position: "absolute",
top: 上,
left : 左、
ボーダー: "solid 1px #ccc"、
幅: $("#" obj.attr("data-tooltip")).outerWidth(true)、
高さ: $(" #" obj.attr("data-tooltip")).outerHeight(true),
'border-radius': '8px 8px',
'background-color': '#fff',
'z-index ': 999
}).appendTo(obj);
var objtiphead = $("

").css({
width: arrow_w == 30 ? objtip.outerWidth(true) : 15、
高さ: arrow_h == 30 ? objtip.outerHeight(true) : 15、
位置: "絶対"、
上: _top、
左: _left
}).appendTo(objtip);
var objtiparrow = $("

").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()); >mouseenter: function () {
obj.data({
attip: true
});
}、mouseleave: function () {
$(".tooltip").remove ();
obj.removeData("attip");
}
、mouseleave: function () {
if (! 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);
_top = objtip.outerHeight(true);
_left = 15;
},
down: function () {
arrow_w = 30; arrow_h = 15;
top = obj.position().top 12 obj.height();
_top = -15; = 15;
arrow = '-50px 0';
},
right: function () {
arrow_w = 15;
top = obj.position ();
left = obj.position().left - 12 - objtip.outerWidth(true);
_left = objtip.outerWidth(true); = '- 80px -20px';
},
left: function () {
arrow_w = 15;
top = obj.position().top; 🎜>left = obj.position().left obj.width() 12;
_top = 15;
arrow = '0 -20px'; >};
opt.star();
opt.direction = $.inArray(opt.direction, dirarray) != -1 ?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())
else
tooltippos.up();
case "right":
if (obj) [0] .getBoundingClientRect().left - 10 - objtip.outerWidth() > 0)
else
break case " left":
if (obj[0].getBoundingClientRect().left obj.width() 10 objtip.outerWidth() < $(window).width())
tooltippos.left( );
else
tooltippos.right();
}
}
}


テストしたところ、IE7 の矢印にポインティングエラーがあるようです。変更することができます。小さな問題です。水をまきます~

レンダリング
:


もちろん、コンテンツは自分で作成する必要があります。表示 div を書いただけです。使用方法は非常に簡単です。

ソース コードのダウンロード

操作説明はユーザー エクスペリエンス エンジニアに対する侮辱です。