CODEWITHSUNDEEP
jqueryjquery-ui
tark
tark

Reputation: 11

Jquery-ui Tooltip not working with HTM Button?

Jquery-ui tooltip function seemingly not working with button as the target. Using jquery-ui version 1.9.2 and jquery version 1.8.3.

I created jsfiddle for my problem, and it seems to not function at all. I'm completely stumped here. Here's my javascript:

$(document).ready(function () {
    $('#myBtn').tooltip({
        position: {
            my: "left top",
            at: "bottom"
        },
        content: function () {
            return "This tooltip is a function return value with <b>HTML content</b>";
        }
    });
});

And here's the HTML:

<body>
    <form>
        <button id="myBtn" class="text">My button</button>
    </form>
</body>

Upvotes: 1

Views: 1069

Answers (1)

Irvin Dominin
Irvin Dominin

Reputation: 30993

Tooltips can be attached to any element. When you hover the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip.

But as it's not a native tooltip, it can be styled. Any themes built with ThemeRoller will also style tooltips accordingly.

So to fix your issue you can set an empty title attribute like:

<body>
    <form>
        <button id="myBtn" title="" class="text">My button</button>
    </form>
</body>

Demo: http://jsfiddle.net/VSEQP/

Upvotes: 1

Related Questions