自定義工具提示

Question

〜我使用的是非常輕微的修改版本jQuery的工具提示腳本的創造在IE可見雙提示：http://cssglobe.com/lab/tooltip/01/ - 我所做的唯一修改是將其設置爲啓動上除了區鏈接工具提示定期的鏈接。在上面鏈接的示例中，IE瀏覽器沒有問題 - 內置的IE工具提示未顯示，只顯示自定義的一個。但在我的頁面上，除了自定義工具提示外，IE中的內置工具提示仍在顯示。任何想法可能會造成這種情況？

這裏是因爲我使用它的腳本：

this.tooltipText = function() { 
    /* CONFIG */ 
    xOffset = 0; 
    yOffset = 0; 
    /* END CONFIG */ 
    $("a.tooltipText, area.tooltipText").hover(function (e) { 
     this.t = this.title; 
     this.title = ""; 
     $("body").append("<p id='tooltipText'>" + this.t + "</p>"); 
     $("#tooltipText").css("top", (e.pageY - xOffset) + "px").css("left", (e.pageX + yOffset) + "px").fadeIn("fast"); 
    }, function() { 
     this.title = this.t; 
     $("#tooltipText").remove(); 
    }); 
    $("a.tooltipText, area.tooltipText").mousemove(function (e) { 
     $("#tooltipText").css("top", (e.pageY - xOffset) + "px").css("left", (e.pageX + yOffset) + "px"); 
    }); 
}; 
// starting the script on page load 
$(document).ready(function() { 
    tooltipText(); 
}); 

這裏是從HTML樣本觸發提示：

<area shape="rect" coords="9,359,617,391" href="/link-here/" onclick="window.open(this.href,'','toolbar=no, location=no, addressbar=no, status=no, menubar=no, scrollbars=yes, resizable=yes, width=510, height=580, top=50, left=150'); return false;" target="_blank" class="tooltipText" title="<strong>First part bold</strong> Rest of tooltip text goes here <strong>Read More...</strong>" /> 

我想不出什麼我」米這裏使用的腳本不同的方式來做：http://cssglobe.com/lab/tooltip/01/

與往常一樣，任何幫助是極大的讚賞！

Answer 1

標籤其他標籤的屬性中的嵌套是無效的HTML，是IE的問題的可能來源

爲了保持title屬性中的標題的全文，並且仍然可以將其分成大膽和正常，你可以使用分隔符如「|」並在腳本中構建工具提示時將標題分隔在分隔符處。

<img title="This will be bold | this is normal" src=""/> 

修改的碼

this.tooltipText = function() { 
/* CONFIG */ 
xOffset = 0; 
yOffset = 0; 
/* END CONFIG */ 
$("a.tooltipText, area.tooltipText").hover(function (e) { 
    this.t = this.title; 
    this.title = ""; 

    /* split title at pipe delimiter*/ 
    this.title_parts= this.t.split('|'); 
    this.tip_content='<strong>'+this.title_parts[0]+'</strong>'+this.title_parts[1]; 

    $("body").append("<p id='tooltipText'><strong>" +/*change===> */ this.tip_content + "</p>"); 
    $("#tooltipText").css("top", (e.pageY - xOffset) + "px").css("left", (e.pageX + yOffset) + "px").fadeIn("fast"); 
}, function() { 
    this.title = this.t; 
    $("#tooltipText").remove(); 
}); 
$("a.tooltipText, area.tooltipText").mousemove(function (e) { 
    $("#tooltipText").css("top", (e.pageY - xOffset) + "px").css("left", (e.pageX + yOffset) + "px"); 
}); 

};

編輯：下面將完全消除在頁面加載的標題，並將其存儲在元數據雙工具提示問題

this.tooltipText = function() { 
    /* CONFIG */ 
    xOffset = 0; 
    yOffset = 0; 
    /* END CONFIG */ 
    $("a.tooltipText, area.tooltipText").hover(function (e) { 
     this.t = $(this).data('title'); 

     /* split title at pipe delimiter*/ 
     this.title_parts= this.t.split('|'); 
     this.tip_content='<strong>'+this.title_parts[0]+'</strong>'+this.title_parts[1]; 

     $("body").append("<p id='tooltipText'><strong>" +/*change===> */ this.tip_content + "</p>"); 
     $("#tooltipText").css("top", (e.pageY - xOffset) + "px").css("left", (e.pageX + yOffset) + "px").fadeIn("fast"); 
    }, function() { 
     /*this.title = this.t;*/ 
     $("#tooltipText").remove(); 
    }).attr('title', function(index, title){ 
     $(this).data('title', title); 
     return ''; 
    }); 
    $("a.tooltipText, area.tooltipText").mousemove(function (e) { 
     $("#tooltipText").css("top", (e.pageY - xOffset) + "px").css("left", (e.pageX + yOffset) + "px"); 
    }); 
}; 

Answer 2

解決方案在IE

問題就解決了。對於IE 6,7,8,9，IE有這個問題，它將顯示兩次工具提示。需要告訴IE不要顯示標題。我發現TNE淨一小段代碼片段

<!--[if IE]><script>for(i =0;i<document.images.length;i++){document.images[i].alt='';}</script><![endif]-->

，這並不工作，但我改變了「ALT」所有權和賓果它工作正常

<!--[if IE]><script>for(i =0;i<document.images.length;i++){document.images[i].title='';}</script><![endif]-->' 地方snipet在底部或頂部自己的網頁和工具提示會在IE中正確顯示