Question

我正在使用FancyBox和一个非常简单的jQuery工具提示，如果还没有点击图像，工具提示用于显示页面上的“标题”。如果点击图像，fancybox将接管标题以显示标题标签“inside”。单击图像后标题不会显示，但工具提示正常。是否可以让它们一起工作？

以下是工具提示的jQuery：

$(document).ready(function(){
    tooltip();
});

this.tooltip = function(){  
    $("a.tooltip").hover(function(e){                                             
        this.t = this.title;
        this.title = "";                                      
        $("body").append("<p id='tooltip'>"+ this.t +"</p>");
        $("#tooltip").fadeIn("fast");       
    },
    function(){
        this.title = this.t;        
        $("#tooltip").remove();
    }); 
    $("a.tooltip").mousemove(function(e){
        $("#tooltip")

    });         
};

这是我的FancyBox代码：

<script type="text/javascript">
    $(document).ready(function() {
        $("a#example8").fancybox({
            'titlePosition': 'over'
        });
    });
</script>

这是HTML代码：

<a id="example8" class="tooltip" href="./example/8_b.jpg" title="Sed vel sapien vel sem tempus placerat eu ut tortor. Nulla facilisi. Sed adipiscing, turpis ut cursus molestie, sem eros viverra mauris, quis sollicitudin sapien enim nec est. ras pulvinar placerat diam eu consectetur.">
    <img class="last" alt="example7" src="./example/8_s.jpg" />
</a>

Answer 1

在javascript之上声明一个全局变量，例如

var thisTitle;

然后使用该变量克隆工具提示脚本中的title（而不是this.t），如

this.tooltip = function(){  
    $("a.tooltip").hover(function(e){                                             
        thisTitle = this.title;
        this.title = "";                                      
        $("body").append("<p id='tooltip'>"+ thisTitle +"</p>");
        $("#tooltip").fadeIn("fast");       
    },
    function(){
        this.title = thisTitle;        
        $("#tooltip").remove();
    }); 
    $("a.tooltip").mousemove(function(e){
        $("#tooltip")

    });         
}

在您的fancybox自定义脚本中，使用titleFormat API选项从title变量中提取thisTitle，如

$("a#example8").fancybox({
   "titlePosition": 'over',
   "titleFormat"  : function(){
      return '<span id="fancybox-title-over">'+thisTitle+'</span>'
    }
});

所有在一起？

<script type="text/javascript">
var thisTitle;
$(document).ready(function(){
 tooltip();
 $("a#example8").fancybox({
   "titlePosition": "over",
   "titleFormat": function(){
      return '<span id="fancybox-title-over">'+thisTitle+'</span>'
    }
 }); // fancybox
}); // ready

this.tooltip = function(){  
    $("a.tooltip").hover(function(e){                                             
        thisTitle = this.title;
        this.title = "";                                      
        $("body").append("<p id='tooltip'>"+ thisTitle +"</p>");
        $("#tooltip").fadeIn("fast");       
    },
    function(){
        this.title = thisTitle;        
        $("#tooltip").remove();
    }); 
    $("a.tooltip").mousemove(function(e){
        $("#tooltip")
    });         
}
</script>

FancyBox和自定义工具提示一起工作

1 个答案: