Question

I am using qTip2 in my application. The tooptipfication I am achieving through the following jQuery:

$(this).qtip({
        style: {
            tip: {
                corner: true,
                width: 10,
                height: 5
            },
            classes: 'ui-tooltip-rounded ui-tooltip-shadow ui-tooltip-tipsy'
        },
        position: {
            my: 'bottom left',
            at: 'top right',
            adjust: {
                x: -10,
                y: 0
            }
        },
        events: {
            show: function (event, api) {
                $('.ui-tooltip-content').addClass('ui-tooltip-center');
            }
        },
        show: {
            effect: function (offset) {
                $(this).show();
            }
        },
        hide: {
            effect: function (offset) {
                $(this).hide();
            }
        }
});

Now it is rendering in:

• Firefox:
• IE8:

As you can see the rounded corner is gone in IE8; also the adjustment of the Tip of x, y is not working. I am in search for a solution for this particular problem of qTip2. Is there any way solve this?

Are there any better Tooptip Library available which don’t have this kind of problem?

Answer 1

IE8 doesnt support border-radius property and hence you cant have rounded corners in qtip. Here is a post on the library website with the author replying saying it is not supported and he doesnt wanna over engineer for something as trivial as a qtip.

http://craigsworks.com/projects/forums/thread-rounded-corners-with-ie8-possible