Question

I have used the jQuery Qtip plugin to create some tooltips using the following code:

$('*[title]').each(function() {
        //if ($(this).attr('title') != "") {
        $(this).qtip({
            content: $(this).attr('title'),
            position: {
                target: 'mouse',
                adjust: {
                    screen: true,
                    x: 5,
                    y: 15
                },
                corner: {
                    target: 'rightMiddle',
                    tooltip: 'leftMiddle'
                }
            },
            style: {
                fontSize: 11,
                padding: '2px 6px',
                textAlign: 'left',
                lineHeight: 1.5,
                fontWeight: 'bold',
                color: '#444',
                border: {
                    width: 1,
                    radius: 2
                },
                name: 'cream'
            }
        })
           .attr('title', '');
        // }
    });


    $('span.help').each(function () {
        $(this).qtip({
            /*content: {
            text: $(this).html()
            },*/
            content: $(this).attr('title'),
            position: {
                adjust: {
                    screen: false,
                    x: 0,
                    y: 0
                },
                corner: {
                    target: 'topRight',
                    tooltip: 'bottomRight'
                }
            },
            show: 'mouseover',
            hide: 'mouseout',
            style: {
                title: { 'font-size': 11, padding: '6px 6px', lineHeight: 1.5 },
                fontSize: 11,
                padding: '6px 6px',
                textAlign: 'left',
                lineHeight: 1.5,
                fontWeight: '600',
                border: {
                    width: 3,
                    radius: 3
                },
                tip: 'bottomRight',
                name: 'cream'
            }
        })
   .attr('title', '');
    });

Basically all elements with a title have a tooltip BUT I want elements with the class of help to have a special tooltip. What happens is that I get TWO tooltips for the help element. Is it possible to override the first one with the second completely?

Perhaps using some sort of if statement to check first that it’s NOT the help class if not then do the first function and if so then do the second function.

Thanks

Answer 1

Have you tried just adding a :not() clause to your first select to exclude the help spans?:

 $('*[title]:not(span.help)').each(function() {