現在のツールチップは、画像、フィールド、またはスパンのタイトルではなく、リンクのタイトルでのみ機能します。ツールチップをすべてのタイトルで機能させるにはどうすればよいですか?
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 を次に示します。ツール ヒントを 2 つの可能な代替手段、きれいなツールヒント プラグイン、およびより詳細なヒントのための単純な「tooltipquestion」クラスに制限するように変更してみました。
$(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>
コードを調整して、既に機能している .