开发者

Problem binding hover event to combobox items

I've got the following situation. I need to show a tooltip with custom text when the mouse cursor is over the combobox items (over the "option" tag). My first idea to resolve this was using the title tag. It has worked well with Firefox, but with IE, when the text is too large, it got truncated.

Then, I thought about using a div as a tooltip, and show/hide it. I've created the following code, and it works on Firefox (the enter and leave events are triggered), but again in IE they don't do nothing.

    $(document).ready(function () {
        var $tooltip = $("#tooltip").hide();
        var $options = $("#ddlSelect option");
        $options.each(function () {
            var texto = $(this).attr("title");
            $(this).data("title", t开发者_StackOverflowexto);
            $(this).attr("title", "");
        });
        $options.hover(function () {
            var texto = $(this).data("title");
            if (texto != "")
                $tooltip.show().text(texto);
        }, function () {
            $tooltip.hide();
        });
    });  

Obs. "tooltip" is a div. "ddlSelect" is a combobox with some options. All its "option" have a title tag associated, just to be the initial container of the custom text.

I'm using IE 8. Does anyone knows why IE can't triggers these events?

Thanks


I might suggest this example from jQuery UI:

http://jqueryui.com/demos/autocomplete/#combobox

You'll then have to dip in to the plugin code to add a mouseover event setter for your options.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜