Question

~ I am using a very slightly modified version of the jQuery tooltip script at: http://cssglobe.com/lab/tooltip/01/ — the only modification i made is to set it to initiate the tooltip on area links in addition to regular a links. In the sample at the link above there is no problem in IE browsers – the built-in IE tooltip is not showing, only the custom one. But on my page the built-in tooltip in IE is still showing in addition to the custom tooltip. Any idea what could be causing this?

Here is the script as I am using it:

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

And here is a sample from the html to trigger the tooltip:

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

I can’t figure out what I’m doing differently from the script used here: http://cssglobe.com/lab/tooltip/01/

As always, any help is greatly appreciated!!

Answer 1

The nesting of tags within attributes of another tag is invalid html and is likely source of IE problem

In order to keep the full text of the title within the title attribute, and still be able to separate it into bold and normal you could use a delimiter like “|” and split the title at the delimiter when the tooltip is constructed in script.

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

modified code

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

};

EDIT: Following will remove titles completely on page load, and store in element data

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