我当前的工具提示仅适用于链接的标题，而不适用于图像、字段或跨度的标题 - 如何让工具提示适用于所有标题？
这是 aToolTip JS：
(function($) {
$.fn.aToolTip = function(options) {
/**
setup default settings
*/
var defaults = {
// no need to change/override
closeTipBtn: 'aToolTipCloseBtn',
toolTipId: 'aToolTip',
// ok to override
fixed: true,
clickIt: false,
inSpeed: 200,
outSpeed: 100,
tipContent: '',
toolTipClass: 'defaultTheme',
xOffset: 5,
yOffset: 5,
onShow: null,
onHide: null,
},
// This makes it so the users custom options overrides the default ones
settings = $.extend({}, defaults, options);
return this.each(function() {
var obj = $(this);
/**
Decide weather to use a title attr as the tooltip content
*/
if(obj.attr('title')){
// set the tooltip content/text to be the obj title attribute
var tipContent = obj.attr('title');
} else {
// if no title attribute set it to the tipContent option in settings
var tipContent = settings.tipContent;
}
/**
Build the markup for aToolTip
*/
var buildaToolTip = function(){
$('body').append("<div id='"+settings.toolTipId+"' class='"+settings.toolTipClass+"'><p class='aToolTipContent'>"+tipContent+"</p></div>");
if(tipContent && settings.clickIt){
$('#'+settings.toolTipId+' p.aToolTipContent')
.append("<a id='"+settings.closeTipBtn+"' href='#' alt='close'>close</a>");
}
},
/**
Position aToolTip
*/
positionaToolTip = function(){
$('#'+settings.toolTipId).css({
top: (obj.offset().top - $('#'+settings.toolTipId).outerHeight() - settings.yOffset) + 'px',
left: (obj.offset().left + obj.outerWidth() + settings.xOffset) + 'px'
})
// added delay() call...
.stop().delay(1000).fadeIn(settings.inSpeed, function(){
if ($.isFunction(settings.onShow)){
settings.onShow(obj);
}
});
var $tooltip = $('#' + settings.toolTipId),
$win = $(window),
winLeft = $win.scrollLeft(),
objWidth = obj.outerWidth(),
tipWidth = $tooltip.outerWidth(),
offset = obj.offset(),
ttWidth = $tooltip.outerWidth(),
ttHeight = $tooltip.outerHeight();
$win.width() < (offset.left - winLeft + objWidth + tipWidth + ttWidth) ?
$tooltip //reversed (to left)
.addClass("reversed")
.css({
left: offset.left - winLeft - tipWidth - ttWidth,
top: offset.top - $win.scrollTop() + obj.outerHeight() / 2 + ttHeight
})
:
$tooltip //standard (to right)
.css({
left: offset.left - winLeft + objWidth + ttWidth,
top: offset.top - $win.scrollTop() + obj.outerHeight() / 2 + ttHeight
});
},
/**
Remove aToolTip
*/
removeaToolTip = function(){
// Fade out
$('#'+settings.toolTipId).stop().fadeOut(settings.outSpeed, function(){
$(this).remove();
if($.isFunction(settings.onHide)){
settings.onHide(obj);
}
});
};
/**
Decide what kind of tooltips to display
*/
// Regular aToolTip
if(tipContent && !settings.clickIt){
// Activate on hover
obj.hover(function(){
// remove already existing tooltip
$('#'+settings.toolTipId).remove();
obj.attr({title: ''});
buildaToolTip();
positionaToolTip();
}, function(){
removeaToolTip();
});
}
// Click activated aToolTip
if(tipContent && settings.clickIt){
// Activate on click
obj.click(function(el){
// remove already existing tooltip
$('#'+settings.toolTipId).remove();
obj.attr({title: ''});
buildaToolTip();
positionaToolTip();
// Click to close tooltip
$('#'+settings.closeTipBtn).click(function(){
removeaToolTip();
return false;
});
return false;
});
}
// Follow mouse if enabled
if(!settings.fixed && !settings.clickIt){
obj.mousemove(function(el){
$('#'+settings.toolTipId).css({
top: (el.pageY - $('#'+settings.toolTipId).outerHeight() - settings.yOffset),
left: (el.pageX + settings.xOffset)
});
});
}
}); // END: return this
};
})(jQuery);
这是我用来触发它的标头中的 JavaScript：我尝试修改它以尝试将工具提示限制为两个可能的替代项，漂亮的工具提示插件和一个简单的“工具提示问题”类以获得更详细的提示。
$(function() {
$("a:not(.tooltipquestion)").aToolTip({
closeTipBtn: 'aToolTipCloseBtn',
toolTipId: 'aToolTip',
fixed: false, // Set true to activate fixed position
clickIt: false, // set to true for click activated tooltip
inSpeed: 400, // Speed tooltip fades in --chris/peter 12/9
outSpeed: 400, // Speed tooltip fades out
tipContent: '', // Pass in content or it will use objects 'title' attribute
toolTipClass: 'defaultTheme', // Set class name for custom theme/styles
xOffset: 15, // x position
yOffset: -50, // y position
onShow: null, // callback function that fires after atooltip has shown
onHide: null // callback function that fires after atooltip has faded out
});
});
工具提示的 CSS 如下：
#aToolTip {
position: absolute;
display: none;
z-index: 50000;
max-width: 350px;
collision: flipfit flip;
}
#aToolTip .aToolTipContent {
position:relative;
margin:0;
padding:0;
max-width: 350px;
collision: flipfit flip;
}
#aToolTip span {
position: absolute;
display: none;
z-index: 50000;
}
#aToolTip .aToolTipContent span {
position:relative;
margin:0;
padding:0;
}
/*
END: Required Styles
*/
/**
Default Theme
*/
.defaultTheme {
border:2px solid #444;
background:#555;
color:#fff;
margin:0;
padding:6px 12px;
font-family: 'Archivo Narrow', sans-serif;
font-size: 10pt;
-moz-border-radius: 0 12px 12px 12px ;
-webkit-border-radius: 0 12px 12px 12px ;
-khtml-border-radius: 0 12px 12px 12px ;
border-radius: 0 12px 12px 12px ;
/*
-moz-border-radius: 12px 12px 12px 0;
-webkit-border-radius: 12px 12px 12px 0;
-khtml-border-radius: 12px 12px 12px 0;
border-radius: 12px 12px 12px 0;
-moz-border-radius: 6px 6px 6px 0;
-webkit-border-radius: 6px 6px 6px 0;
-khtml-border-radius: 6px 6px 6px 0;
border-radius: 6px 6px 6px 0;
*/
-moz-box-shadow: 2px 2px 5px #111; /* for Firefox 3.5+ */
-webkit-box-shadow: 2px 2px 5px #111; /* for Safari and Chrome */
box-shadow: 2px 2px 5px #111; /* for Safari and Chrome */
}
.defaultTheme #aToolTipCloseBtn {
display:block;
height:18px;
width:18px;
background:url(../images/closeBtn.png) no-repeat;
text-indent:-9999px;
outline:none;
position:absolute;
top:-20px;
right:-30px;
margin:2px;
padding:4px;
}
这是一些 HTML 的示例，它有几个工具提示 - 一个工作标题、一个使用 class="tooltipquestion" 和一个我希望 jQuery 插件处理的非工作标题：
<tr>
<td class="checkbox"><input type="checkbox" name="paramId[]" id="paramId[]" /></td>
<td class="open"><a href="questions_edit.asp" title="View this question">Biology, lab, meth</a></td>
<td class="open">Haney, M</td>
<td class="open">Draft</td>
<td class="open">M/C</td>
<td class="action" nowrap="nowrap"><a href="#" class="tooltipquestion" title= "<strong>Plant leaves appear green because they ____ light spectrum. </strong>
<br><b>a.)</b> Scatter all colors except the green portion of the visible.
<br><b>b.)</b> Scatter the green portion of the visible.
<br><b>c.)</b> Absorb the green portion of the visible.
<br><b>d.)</b> Scatter the green portion of the ultraviolet. ">Preview</a></td>
<td class="action" nowrap="nowrap"><a href="questions_edit.asp" title="Edit this question"><img src="Icons/edit-green.gif" alt="Edit Question" title="Edit Question" width="16" height="16" border="0" /></a> <a href="questions_listing.asp?confirmation=1"><img src="Icons/delete.png" alt="Delete Question" title="Delete Question" width="16" height="16" border="0" /></a></td>
</tr>
如何调整我的代码以允许工具提示和标题以及已经工作的标题也可以触发？