切换工具提示文字

Question

Basically my issue is that my tooltip won't change text on toggle. I have a page with expand/collapse functionality. Normally, when you hover over the up arrow, the title tag will say collapse panel. When you click the arrow button to collapse the div panel, the img changes (now the arrow will point down and the title tag should change to expand panel). This works and the title changes WITHOUT tooltips. When tooltips are added, the text doesn't change. I believe you have to destroy and create a new tooltip on click but I'm not sure how to do this. He's my code, thanks in advance.

$("img.toggle1").click(function(){
  if (document.getElementById("panel1").style.display != "none") { // is the div hidden?
    $("img.toggle1").attr("src", "images/expander-down.png");
    $("img.toggle1").attr("title", "Expand this section");
     }
  else{ // is the div showing?
    $("img.toggle1").attr("src", "images/expander-up.png");
    $("img.toggle1").attr("title", "Collapse this section");
    $('div#header1').addClass('headerBarFirstOff');
  }
    $("div.panel1").slideToggle("slow");

  });

So update with the destroy/create method. I can get the tooltip to change to expand on the first click, but it stays as "expand". I used this:

$("img.toggle1").click(function(){
  if (document.getElementById("panel2").style.display != "none") {
    $("img.toggle1").attr("src", "images/expander-down.png");
    $(document).tooltip("destroy"); //here's the change, the tooltip toggles once
    $(document).tooltip(); //here's the change, the tooltip toggles once
    $("img.toggle1").attr("title", "Expand this section");
     }
  else{
    $("img.toggle1").attr("src", "images/expander-up.png");
    //$(document).tooltip("destroy"); //doesn't work here
    //$(document).tooltip(); //doesn't work here
    $("img.toggle1").attr("title", "Collapse this section");
  }

Also, I have checkboxes (that hide/show specific panels) and buttons that open or close all:

$(document).ready(function(){
$("input.togglePanel1").click(function(){
  if($(".togglePanel1").length == $(".togglePanel1:checked").length) { 
    $("div.panel1").slideDown("slow");
    } else {  
    $("div.panel1").slideUp("slow");
    }
  });
$("input.togglePanel2").click(function(){
  if($(".togglePanel2").length == $(".togglePanel2:checked").length) { 
    $("div.panel2").slideDown("slow");
    } else {  
    $("div.panel2").slideUp("slow");
    }
  });
$("input.togglePanel3").click(function(){
  if($(".togglePanel3").length == $(".togglePanel3:checked").length) { 
    $("div.panel3").slideDown("slow");
    } else {  
    $("div.panel3").slideUp("slow");
    }
  });

$("img#closeAll").click(function(){
    $("div.panel1").slideUp("slow");
    $("div.panel2").slideUp("slow");
    $("div.panel3").slideUp("slow");
    $("div.panel4").slideUp("slow");
    $("div.panel5").slideUp("slow");
  });
$("img#openAll").click(function(){
    $("div.panel1").slideDown("slow");
    $("div.panel2").slideDown("slow");
    $("div.panel3").slideDown("slow");
    $("div.panel4").slideDown("slow");
    $("div.panel5").slideDown("slow");
  });

Answer 1

You can set tooltip text manually using the uiTooltipTitle data attribute

$("img.toggle1").click(function(){
  var ishidden = $('#panel1').is(':hidden');
  var src = ishidden ? "images/expander-down.png" : "images/expander-up.png"
  var title = ishidden ? "Expand this section" : "Collapse this section";
  $("img.toggle1")
           .attr("src", src);
  $("img.toggle1")
           .attr("title", title)
           .data('uiTooltipTitle', title);      
  $("div.panel1").slideToggle("slow");

  });

http://jsfiddle.net/SHBWW/

Using if/else

$("img.toggle1").click(function(){
    if($('#panel1').is(':hidden')){
        $("img.toggle1").attr("src", "images/expander-down.png");
        $("img.toggle1")
           .attr("title", "Expand this section")
           .data('uiTooltipTitle', "Expand this section");  
    }else{
        $("img.toggle1").attr("src", "images/expander-up.png");
        $("img.toggle1")
           .attr("title", "Collapse this section")
           .data('uiTooltipTitle', "Collapse this section");  
    }       
    $("div.panel1").slideToggle("slow");    
  });

Answer 2

$("img.toggle1").click(function(){
  if ($("#panel1").is(":visible")) { 
    //do something
    $("img.toggle1").removeAttr('title');
    $("img.toggle1").attr("title", "Expand this section");
  }
  else{
    //do something
    $("img.toggle1").removeAttr('title');
    $("img.toggle1").attr("title", "Collapse this section");
  }
});