Я настроил Сценарий с подсказкой Роберта Баумгартнера совсем немного, поэтому он не будет выводить элементы с экрана. Я просто добавляю его на свою мастер-страницу, и он будет автоматически выполнен, когда страница будет готова.
window.viewport =
{
height: function() {
return $(window).height();
},
width: function() {
return $(window).width();
},
scrollTop: function() {
return $(window).scrollTop();
},
scrollLeft: function() {
return $(window).scrollLeft();
}
};
jQuery.tooltip = function() {
tooltipClass = ".tooltip"; // replace with your class, for multiple classes, separate with comma.
function str_replace(search, replace, subject) {
return subject.split(search).join(replace);
}
xOffset = 10;
yOffset = 20;
fadeInTime = 300;
function positionToolTip(e) {
var offsetFromTop = e.pageY - viewport.scrollTop();
var offsetFromLeft = e.pageX - viewport.scrollLeft();
var tooltipObj = $('#tooltip');
var pxToBottom = viewport.height() - (e.pageY - viewport.scrollTop());
var cssTop = 0;
var cssLeft = (e.pageX + yOffset);
var topMargin = parseFloat(tooltipObj.css('marginTop'));
if (isNaN(topMargin)) {
topMargin = 0;
}
var topPadding = parseFloat(tooltipObj.css('paddingTop'));
if (isNaN(topPadding)) {
topPadding = 0;
}
var topBorder = parseFloat(tooltipObj.css('border-top-width'));
if (isNaN(topBorder)) {
topBorder = 0;
}
var topOffset = topMargin + topPadding + topBorder;
if (tooltipObj.height() > viewport.height()) {
cssTop = viewport.scrollTop() - topOffset + topPadding;
}
else if (tooltipObj.height() > pxToBottom) {
cssTop = viewport.scrollTop() + (viewport.height() - tooltipObj.height()) - topOffset - topPadding - topBorder;
}
else {
cssTop = e.pageY - xOffset;
}
tooltipObj.css({ top: cssTop, left: cssLeft }).fadeIn(fadeInTime);
}
jQuery("[title]").hover(function(e) {
if (this.t === undefined || this.t.length == 0) {
this.t = this.title;
this.title = "";
this.t = str_replace("::", "<br />", this.t);
this.t = str_replace("[!]", "<span class='tooltipTitle'>", this.t);
this.t = str_replace("[/!]", "</span><br />", this.t);
this.t = str_replace("[", "<", this.t);
this.t = str_replace("]", ">", this.t);
}
if (this.t != "") {
jQuery("body").append("<p id='tooltip'>" + this.t + "</p>");
positionToolTip(e, this);
}
}, function() {
jQuery("#tooltip").remove();
});
jQuery("[title]").mousemove(function(e) {
positionToolTip(e);
});
jQuery("[title]").bind('remove', function() {
jQuery("#tooltip").remove();
});
jQuery("[title]").bind('disabled', function() {
jQuery("#tooltip").remove();
});
}
jQuery(document).ready(function() {
jQuery.tooltip();
});