Force jquery tooltip plugin to show

Question

I have a select element on my page, and I ever time a user chooses an item in the list I want the tooltip to display a corresponding hint:

ctl.change(function (e)
{
    var dtl = $(this);
    dtl.tooltip(
    {
        content: "...custom content..."
    });

    dtl.mouseenter();
});

However I'm not getting the tooltip popping up. Not sure I'm even on the right track here...

Using IE 9, jquery 1.10.2 and jquery-ui 1.10.3

Answer 1

I found a work around hack. Not entirely proud of this, but I created a div next to my drop down, with a display:none style, and then set it up with the following jquery:

ctl.change(function (e)
    {
        var ddl = $(this);
        ddl.next().tooltip(
            {
                content: "...custom content...",
                position:
                    {
                        of: ddl
                    }
            }).tooltip("open");
    });

    ctl.blur(function (e)
    {
        var ddl = $(this);

        ddl.next().tooltip("close");
    });

Not entirely sure why this works and the other doesn't. However I did find that if I put a title on the select and just initialize the tooltip using $(document).tooltip, the tooltip plugin seems to interfere with the selects drop down list, so this approach also resolves that issue.

Answer 2

Try using open function (http://api.jqueryui.com/tooltip/#method-open)

ctl.change(function (e)
    {
        var dtl = $(this);
        dtl.tooltip(
        {
            content: "...custom content..."
        });

        dtl.open();
    });