Question

I’m using the qTip plugin to create tooltips for BOTH alt and title tags. The reason for doing this is because in an application I’m working on I can’t convert all the alt tags on the images to title tags so have had to use both:

e.g.

$('*[title]').qtip({
        content: {
            attr: 'title'
        },
        hide: {
            fixed: false,
            event: 'click mouseleave'
        },
        position: {
            target: "mouse",
            adjust: {
                x: 20,
                y: 10,
                method: "flipinvert flipinvert"
            },
            container: false,
            viewport: true,
            at: "right center",
            my: "left center"
        },
        style: {
            classes: "ui-tooltip-tipsy",
            tip: {
                corner: false
            }
        }
    });

    $('img[alt]').qtip({
        content: {
            attr: 'alt'
        },
        hide: {
            fixed: false,
            event: 'click mouseleave'
        },
        position: {
            target: "mouse",
            adjust: {
                x: 20,
                y: 10,
                method: "flipinvert flipinvert"
            },
            container: false,
            viewport: true,
            at: "right center",
            my: "left center"
        },
        style: {
            classes: "ui-tooltip-tipsy",
            tip: {
                corner: false
            }
        }
    });

The problem I have though, is that if I have a link with a title wrapping an image I will get TWO tooltips which is incorrect behaviour.

My idea is to do some logic checking that if the element I am hovering has a title tag or alt tag then only do one or the other and not both.

So for example if <a href="#" title="Tooltip info"><img src="#" alt="Tooltip info"></a> then it should use either the alt or title tag in this case.

Can anyone help? Thanks

example:

$('a').hover(function() {

if($(this).attr('title')) {
// dont run the alt tag tooltip code
}
});

Answer 1

You can use the following selector for the first one

$('*[title]:not(:has([alt]))').qtip({.....

What it will do is, it will select all elements with title attribute which doesn’t not have any child element with alt attribute.