javascript - jQuery aToolTip 插件只适用于链接的标题，我如何让它也适用于图像、字段和跨度的标题？

Question

我当前的工具提示仅适用于链接的标题，不适用于图像、字段或跨度的标题 - 如何让工具提示适用于所有标题？

这是 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);

这是我用于触发它的 header 中的 JavaScript:我尝试修改它以尝试将工具提示限制为两个可能的替代项，漂亮的工具提示插件和一个简单的“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>&nbsp;Scatter all colors except the green portion of the visible.
    <br><b>b.)</b>&nbsp;Scatter the green portion of the visible.
    <br><b>c.)</b>&nbsp;Absorb the green portion of the visible.
    <br><b>d.)</b>&nbsp;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>&nbsp;<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>

我如何调整我的代码以允许工具提示和标题以及已经工作的同时触发？

Answer 1

您需要针对不同的元素。目前你的目标是任何没有这个类的 anchor ......

.tooltipquestion

理想情况下，你想要做的是，对于你想要应用工具提示的任何元素，你给它一个类

.tooltip

然后您使用此类作为目标选择器初始化插件...

$('.tooltip').aToolTip();

然后您需要给任何“工具提示”元素一个标题属性...

<span title="This is a span tag..." class="tooltip">Some text</span>

然后您可以对任何其他元素执行相同的操作。