showing titles in IE9 and Opera

Question

I made a website http://zielonyzoliborz.pl/ using svg with Raphael, when u mouseover of any building tooltip shows up on the screen (FF, Chrome, Safari) but not in IE9 and Opera i even set up standard title for the IE8 which works but is not the above-mentioned browsers

i'm using Raphael.js to setup a simple title for example:

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);
});

and easytooltip.js to show graphical title (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
}

Erik Dahlström · Answer 1 · 2012-12-05T14:11:13.797

There's a javascript error in your code (this is copied from the Opera Dragonfly debugging tool):

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)

My guess is that the missing tooltips is related to that error.

Update: Ok, after that was fixed I had another look, and the issue is the namespace of the title attribute on the <svg:a> elements. It works if namespace-aware methods are used for accessing the attribute.

A hack/workaround is this:

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

This is to be placed in your plugin.js script (this shows the modified code):

$.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")
            }
        },

The change here is to fallback to getAttributeNS if the jQuery .attr method fails (so much for hiding browser differences huh? ;). With that it works at least in Opera. The real and better fix would be to make sure that the place that sets the attributes either sets them in the null namespace, e.g elm.setAttributeNS(null, "title", "some-value") or to make jQuery namespace-aware (I don't think the chance of that happening is particularly big however).

...and Opera isn't altogether my concern, I care more about IE9 — gidzior, Dec 05 '12 at 13:34

showing titles in IE9 and Opera

1 Answers1