在IE9和Opera中显示标题

Question

我在Raphael上使用svg创建了一个网站http://zielonyzoliborz.pl/ ，当您将任何构建工具提示的鼠标悬停在屏幕上（FF，Chrome，Safari）显示出来时，但在IE9和Opera中却没有，我什至设置了标准标题IE8可以使用，但不是上述浏览器

我正在使用Raphael.js设置一个简单的标题，例如：

paper.path("M1345.5,413.5l0.125-31.125L1256.5,371l-18,22.5l1,22L1038,389.333l-3,3.333l-62,53V454 l-13,11.333v34.333l-42.333-7l-85.333,77v8.667l-14,12v95L821,689v5.25l3.25,2.75v9h5.5l1.25-5.25V697l3-2l2.75-3.875l2-2.625v-4.75 l3-3l3.5-2.75l6.5,0.25l1.75,1.25l2.5,1.75l2.75,4.75v4v2.25V694l2.5,2.25V701v5.75v3.75v2.5l3,1.25H867v-4.75V703v-4.25v-6.25 l2.75-2l1.25-6l3.25-2.5l2.25-5.75h4h3.75l2.5,4.75l1.75,3l1.25,3v5.75l2.5-2.75l3.25-0.25l4-3.25l2.25-1h3.5l3.25,0.75l1.5-4.5 c0,0,3.75-1.5,4.5-0.5s3,1.75,3,2.5s0.75,3,1.75,3.25s4.5,2.5,4.5,2.5s-0.25,3.75,0,4.5s1.25,4.25,1.25,4.25l2,2.5 c0,0,5,0.75,5.75,1s3-1.25,3-1.25l1.5-3.5l3-1.75l2-2.75H945l3.25,0.25h4.25l2.75-1l2.5,1.5c0,0,1.5,3.25,2.25,4s4,4.5,4,4.5 l2.25,4.5l1.75,1.25l4.75-0.5l2.25-4.75v-3.5l3-1.5l3.75,0.25c0,0,3.25,2.25,3.25,3.25s3.5,4.5,3.5,4.5l1.5,4.5l1.5,5.75l2,5v5.25 l3,2h3.25l3.75-2.5h3.75l2.5-1.5l2.5-2.75h3.75l4.75,2.75v3v4L1024,734v5.25v3.25v2l4.25-4.75c0,0,3-1.25,4-1.25s5.25-1,5.25-1 l-2-4.75l2-2.25l2-1.75l-5.75-2.5l-0.25-4l3-1.25l1.25-4.75l3-2.25l4.25-2.5l3.5-1.125l5,1.125l4,3l4.25,3l2.25,4l2.5,2v5.5l4,3.75 l2,2.75l1.75-0.25l2.75-2l1.25-4.75l3.25-4.25l2.5-3.25l2.729-2.25l2.021-2.25h3.75l3.5,1.5l3,3.5v5l2.5,1.25l1.75-3.25l4.25-1.5 h3.5l4.5,3.25l2.75,4.75l1.5,3.75l3.75,0.75l3,3.25l5.75,5.75l1.75,2.25l1.25,3.5v5.25l2.5,2.25l2.25,2.75h8.25h4.25l3.75,1.75 l3,2.5V767l3.25,4.75l2-4.5l3.75-3l2.5-8.5v-4.25c0,0,3.25-2.25,3.25-3s3.5-3.75,3.5-3.75l3.75-1.75l2-3.25V736l5.25-1.5l5-4.75h3.5 l3.25,1l2.75,2.5l3,2.5l1.25,6l1.5,3.5V749c0,0,2,2.5,1.75,3.25s-1,5.5-1,5.5l1.021,6c0,0,0.838,1.598,1.66,2.892l142.326-236.143 l0.617-116.749L1345.5,413.5z M1116,536h-4.667l0.042,6.375l-13.375,14.5v22.375l-68-10.917l35-41.667l26.667,5l5.666-2.667 l3.709-1.854l4.958-0.083l5.125,0.688l3.542,2.583l3,2.667L1116,536z").attr({
"fill":"#FBA919",
"stroke-width":0,
"fill-opacity":0,
"stroke":"transparent",
"cursor":"pointer",
"title":"Budynek B"
}).mouseover(
function(){
this.animate({
"fill-opacity":.4
},300);
}).mouseout(function(){
this.animate({
"fill-opacity":0
},300);
});

和easytooltip.js显示图形标题（FF。Chrome，Opera）

$('svg a:nth-child(21)').easyTooltip({
tooltipId:"budynek-b",
yOffset:90,
xOffset:-44,
});

#budynek-b{
background:url(../img/zz_budynekB_smal.png) no-repeat center center;    
width:60px;    
height:86px;    
overflow:hidden;    
text-indent:-9999px;    
z-index:1000000
}

Answer 1

您的代码中存在一个javascript错误（此错误是从Opera Dragonfly调试工具中复制的）：

Uncaught exception: TypeError: Cannot convert 'b' to objectError thrown at line 1210, column 3 in <anonymous function: _getDisplayTextForRecordField>(b, a) in http://zielonyzoliborz.pl/wp-content/themes/zielonyzoliboz/js/plugins.js:
    var c = this.options.fields[a],
called from line 1155, column 3 in <anonymous function: _createCellForRecordField>(b, a) in http://zielonyzoliborz.pl/wp-content/themes/zielonyzoliboz/js/plugins.js:
    return c('<td class="' + this.options.fields[a].listClass + '"></td>').append(this._getDisplayTextForRecordField(b, a) || "")
called via Function.prototype.apply() from line 2476, column 3 in <anonymous function: _createCellForRecordField>(a, b) in http://zielonyzoliborz.pl/wp-content/themes/zielonyzoliboz/js/plugins.js:
    var c = d.apply(this, arguments);
called from line 1152, column 4 in <anonymous function: _addCellsToRowUsingRecord>(b) in http://zielonyzoliborz.pl/wp-content/themes/zielonyzoliboz/js/plugins.js:
    this._createCellForRecordField(b.data("record"), this._columnList[a]).appendTo(b)
called via Function.prototype.apply() from line 1757, column 3 in <anonymous function: _addCellsToRowUsingRecord>(a) in http://zielonyzoliborz.pl/wp-content/themes/zielonyzoliboz/js/plugins.js:
    f.apply(this, arguments);
called via Function.prototype.apply() from line 1990, column 3 in <anonymous function: _addCellsToRowUsingRecord>(a) in http://zielonyzoliborz.pl/wp-content/themes/zielonyzoliboz/js/plugins.js:
    f.apply(this, arguments);
called via Function.prototype.apply() from line 2120, column 3 in <anonymous function: _addCellsToRowUsingRecord>(a) in http://zielonyzoliborz.pl/wp-content/themes/zielonyzoliboz/js/plugins.js:
    f.apply(this, arguments)
called from line 1147, column 3 in <anonymous function: _createRowFromRecord>(b) in http://zielonyzoliborz.pl/wp-content/themes/zielonyzoliboz/js/plugins.js:
    this._addCellsToRowUsingRecord(b);
called from line 1160, column 4 in <anonymous function: _addRecordsToTable>(b, d) in http://zielonyzoliborz.pl/wp-content/themes/zielonyzoliboz/js/plugins.js:
    a._addRowToTable(a._createRowFromRecord(d))
called via Function.prototype.call() from line 608, column 7 in <anonymous function: each>(a, c, d) in http://zielonyzoliborz.pl/wp-content/themes/zielonyzoliboz/js/jquery-1.7.2.min.js:
    if (c.call(a[g], g, a[g++]) === !1)

我的猜测是缺少的工具提示与该错误有关。

更新 ：好的，修复之后，我有了另一种外观，问题是<svg:a>元素上title属性的命名空间。 如果使用支持名称空间的方法访问属性，则该方法有效。

hack /解决方法是这样的：

var title = $(this).attr("title") || this.getAttributeNS("http://www.w3.org/1999/xlink", "title");

这将放置在您的plugin.js脚本中（显示修改后的代码）：

$.fn.easyTooltip = function(options){

    // default configuration properties
    var defaults = {    
        xOffset: 10,        
        yOffset: 25,
        tooltipId: "easyTooltip",
        clickRemove: false,
        content: "",
        useElement: ""
    }; 

    var options = $.extend(defaults, options);  
    var content;

    this.each(function() {                  
        var title = $(this).attr("title") || this.getAttributeNS("http://www.w3.org/1999/xlink", "title");
        $(this).hover(function(e){                                                                         
            content = (options.content != "") ? options.content : title;
            content = (options.useElement != "") ? $("#" + options.useElement).html() : content;
            $(this).attr("title","");                                                   
            if (content != "" && content != undefined){         
                $("body").append("<div id='"+ options.tooltipId +"'>"+ content +"</div>");      
                $("#" + options.tooltipId)
                    .css("position","absolute")
                    .css("top",(e.pageY - options.yOffset) + "px")
                    .css("left",(e.pageX + options.xOffset) + "px")                     
                    .css("display","none")
                    .fadeIn("fast")
            }
        },

此处的更改是，如果jQuery .attr方法失败（那么多是为了隐藏浏览器差异，是吗？），回getAttributeNS 。 这样，它至少可以在Opera中工作。 真正的更好的解决办法是确保设置属性的位置将它们设置为null命名空间，例如elm.setAttributeNS(null, "title", "some-value")或使jQuery知道命名空间（我认为发生这种情况的机会并不大）。