jquery - jquery -将鼠标悬停在一个上时显示两个不同的标题属性

Answer 1

这是小提琴

// Tooltip only Text
var toolTip = $('.masterTooltip, .masterTooltip1');
$('.masterTooltip, .masterTooltip1').hover(function () {
    // Hover over code
    $.each(toolTip, function () {
        var title = $(this).attr('title');
        var classTooltip = "tooltip tooltip-" + $(this).attr('class');
        $(this).data('tipText', title).removeAttr('title');
        $('<p class="' + classTooltip + '"></p>')
            .text(title)
            .appendTo('body')
            .fadeIn('slow');
    });
},

function () {
    // Hover out code
    $.each(toolTip, function () {
        $(this).attr('title', $(this).data('tipText'));
    });
    $('.tooltip').remove();
}).mousemove(function (e, event) {
    var mousex = e.pageX + 20; //Get X coordinates
    var mousey = e.pageY + 10; //Get Y coordinates

    var im1Height = $('#img1').height();
    var im1Width = $('#img1').width();
    var im2Height = $('#img2').height();
    var im2Width = $('#img2').width();

    if ($(this).hasClass('masterTooltip')) {
        var ratioHeight1 = e.pageY / im1Height;
        var propHeight2 = ratioHeight1 * im2Height;
        var mousey2a = propHeight2 + im1Height;

        var ratioWidth1 = e.pageX / im1Width;
        var propWidth2 = ratioWidth1 * im2Width;
        var mousex2a = propWidth2;

        $('.tooltip-masterTooltip')
            .css({
            top: mousey,
            left: mousex
        });
        $('.tooltip-masterTooltip1')
            .css({
            top: mousey2a,
            left: mousex2a
        });
    } else if ($(this).hasClass('masterTooltip1')) {
        var ratioHeight2 = (e.pageY - im1Height) / im2Height;
        var propHeight1 = ratioHeight2 * im1Height;
        var mousey2b = e.pageY - (im1Height - propHeight1);

        var ratioWidth2 = e.pageX / im2Width;
        var propWidth1 = ratioWidth2 * im1Width;
        var mousex2b = propWidth1;

        $('.tooltip-masterTooltip')
            .css({
            top: mousey2b,
            left: mousex2b
        });
        $('.tooltip-masterTooltip1')
            .css({
            top: mousey,
            left: mousex
        });
    }
});

Answer 2

如果我的理解正确，当您将鼠标悬停在图像上时，您需要两个同时出现的工具提示。此代码将执行此操作：

$(document).ready(function () {
    // Tooltip only Text
    'use strict';
    $('.masterTooltip, .masterTooltip1').hover(function () {
        // Hover over code
        var self = $(this),
            title = self.data('tipText') || self.attr('title'),
            altTitle = self.data('altTipText') || self.attr('altTitle'),
            tip = $('<p />').addClass('tooltip');
        self.data({
            "tipText": title,
            "altTipText": altTitle
        }).removeAttr('title').removeAttr('altTitle');
        tip.clone()
            .addClass('primary')
            .text(title)
            .appendTo('body')
            .fadeIn('slow');
        tip.clone()
            .addClass('alternate')
            .text(altTitle)
            .appendTo('body')
            .fadeIn('slow');
    }, function () {
        // Hover out code
        $('.tooltip').remove();
    }).mousemove(function (e) {
        var titleX = e.pageX + 20, //Get X coordinates
            titleY = e.pageY + 10, //Get Y coordinates
            altX = e.pageX + 20, //Get X coordinates
            altY = e.pageY - 70; //Get Y coordinates
        $('.tooltip.primary').css({
            "top": titleY,
            "left": titleX
        });
        $('.tooltip.alternate').css({
            "top": altY,
            "left": altX
        });
    });
});

工作小提琴：http: //jsfiddle.net/LUFuY/

Answer 3

将您的工具提示元素集合存储在一个变量中：

var $tooltips - $('.masterTooltip,.masterTooltip1').hover(function(){ ... });

然后稍微修改以针对集合而不是$(this)：

$(document).ready(
   function() {
      // Tooltip only Text
      var $tooltips = $('.masterTooltip,.masterTooltip1')
                          .hover(
                              function(){
                                  // Hover over code
                                  var html = "<div class='tooltip'>";
                                  $tooltips.each(function() { 
                                     var title = $(this).attr('title');
                                     $(this).data('tipText', title).removeAttr('title') 
                                     html += '<p class="tooltip-inner">' + title + '</p>';
                                  });
                                  html += "</div>";
                                  $(html)
                                     .appendTo('body')
                                     .fadeIn('slow');
                              }, 
                              function() {
                                  // Hover out code
                                  $tooltips.each(function() { 
                                      $(this).attr('title', $(this).data('tipText')) 
                                  });
                                  $('.tooltip').remove();
                              })
                         .mousemove(
                              function(e) {
                                  var mousex = e.pageX + 20; //Get X coordinates
                                  var mousey = e.pageY + 10; //Get Y coordinates
                                  $('.tooltip')
                                      .css({ top: mousey, left: mousex })
                               });
});

CSS

.tooltip {
display:none;
position:absolute;
color:#fff;
font-size:12px Arial;
}
.tooltip-inner {
border:1px solid #333;
background-color:#161616;
border-radius:5px;
padding:10px; 
display:inline-block;
}