Question

I am using FancyBox and a very simple jQuery tooltip together, if not clicked on images yet, the tooltip is for showing the “titles” on the page. If clicked a image the fancybox will take over the title to display title tag “inside”.
The title doesn’t show up once clicked the image, but the tooltip is OK. Is it possible to make them work together?

Here is the jQuery for tooltip:

$(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")

    });         
};

Here is my FancyBox code:

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

This is HTML code:

<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

Declare a global variable on top of your javascript, e.g.

var thisTitle;

then use that variable to clone the title within your tooltip script (instead of this.t) like

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")

    });         
}

In your fancybox custom script, use the titleFormat API option to pull the title from the thisTitle variable like

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

all together?

<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>