jquery msdropdown

Hello all,

I am using msdropdown for styling my dropdown with images. But i am not able to give tooltips to the items of dropdowns as the title attribute is used to hold the image path. Can anyone please suggest me, how to show tooltip when i am using msdropdown.

MSDropDown - jquery.dd.js

Version: 2.37.5

Re: jquery msdropdown

Hi, you can add mouseover event to your page so that if the mouse over the image (in the option), it can show some tooltip. For example:

$('img').mouseover(function () {
                $('#tooltip').empty();
                $('#tooltip').html("Tooltip");
            });

And then please add the following codes to your markup beside dropdown:

<div id="tooltip"></div>

Re: jquery msdropdown

Hello Allen,

But its not working. I have a "select" control. And at page load event , i have added title attribute to show tooltip, because tooltip is not its property. So when the page loads then it shows me a cross symbol instead of image. and even image mouseover is not working.

Re: jquery msdropdown

Hi,

Try this-

http://growingtech.blogspot.in/2012/02/using-msdropdown-with-tooltips-plugin.html

Re: jquery msdropdown

Hi, it seems that the image path in "title" attribute is incorrect, please check it. Additionlly, plesae refer to the following links and try again:

http://www.marghoobsuleman.com/jquery-image-dropdown

http://www.marghoobsuleman.com/mywork/jcomponents/image-dropdown/samples/normal.html

Re: jquery msdropdown

Hi,

Actually am applying theme dd2 as

$("#cboEmpMsgTypes").ready(function (e) {
$("#cboEmpMsgTypes").msDropDown({ mainCSS: 'dd2' }).data("dd");
$("#ver").html($.msDropDown.version);
});

so how can i call onInit function for msdropdown? I have tried it, but not working and even i am filling items dynamically to the dropdown and giving tooltip to it by server side. So how can i add dummy attribute to items??

Re: jquery msdropdown

aster has suggestted the method to call onInit function:

http://growingtech.blogspot.in/2012/02/using-msdropdown-with-tooltips-plugin.html

Re: jquery msdropdown

Hi,

I have tried onInit function, but then style is not applying on my dropdown, the above code i mentioned. Both simultaneously not working. It is looking very wierd. All messed up items.

Re: jquery msdropdown

I tried his codes and found they worked, please try the following codes:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.js" type="text/javascript"></script>
    <script src="http://www.marghoobsuleman.com/mywork/jcomponents/image-dropdown/samples/msdropdown/js/jquery.dd.js"
        type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="http://www.marghoobsuleman.com/mywork/jcomponents/image-dropdown/samples/msdropdown/dd.css" />
    <script src="http://jquery.bassistance.de/tooltip/jquery.tooltip.js" type="text/javascript"></script>
    <link href="http://jquery.bassistance.de/tooltip/jquery.tooltip.css" rel="stylesheet"
        type="text/css" />
    <script type="text/jscript">
        $(document).ready(function (e) {
            try {
                $("#webmenu").msDropDown({ onInit: callAfterInitialization });
            } catch (e) {
                alert(e.message);
            }
        });
        function callAfterInitialization() {
            $("a[id*=webmenu]").tooltip({
                track: true,
                delay: 0,
                showURL: false,
                fade: 250,
                bodyHandler: function () {
                    return $("select[id*=webmenu] option:eq(" + this.id.substring(this.id.lastIndexOf("_") + 1) + ")").attr("tooltipdata");
                },
                showURL: false
            });
        }
    </script>

    <style type="text/css">
        div#tooltip
        {
            z-index: 20000;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <select name="webmenu" id="webmenu">
            <option value="calendar" tooltipdata="Calendar tip" title="http://www.marghoobsuleman.com/mywork/jcomponents/image-dropdown/samples/icons/icon_calendar.gif">
                Calendar</option>
            <option value="shopping_cart" tooltipdata="Shopping Cart tip" title="http://www.marghoobsuleman.com/mywork/jcomponents/image-dropdown/samples/icons/icon_cart.gif">
                Shopping Cart</option>
            <option value="cd" tooltipdata="CD tip" title="http://www.marghoobsuleman.com/mywork/jcomponents/image-dropdown/samples/icons/icon_cd.gif">
                CD</option>
            <option value="email" selected="selected" tooltipdata="Email tip" title="http://www.marghoobsuleman.com/mywork/jcomponents/image-dropdown/samples/icons/icon_email.gif">
                Email</option>
            <option value="faq" tooltipdata="FAQ tip" title="http://www.marghoobsuleman.com/mywork/jcomponents/image-dropdown/samples/icons/icon_faq.gif">
                FAQ</option>
            <option value="games" tooltipdata="Games tip" title="http://www.marghoobsuleman.com/mywork/jcomponents/image-dropdown/samples/icons/icon_games.gif">
                Games</option>
        </select>
    </div>
    </form>
</body>
</html>

Re: jquery msdropdown

I have tried above code and its working for tooltip but when i tried to aplies the other theme not the default one, the tooltip is not displaying.

How should i use these two statements?

$("#webmenu").msDropDown({ mainCSS: 'dd2' }).data("dd");

$("#webmenu").msDropDown({ onInit: callAfterInitialization });

please suggest.

Re: jquery msdropdown

Hi,

Try this-

$("#webmenu").msDropDown({ mainCSS: 'dd2', onInit: callAfterInitialization });

Re: jquery msdropdown

Thanks :)

It worked for me. Now both are working fine, but when a partial postback occurs, then again tooltips are lost, even some time on selectindex change the tooltip becoming transparent.

Please suggest me code for selected item of dropdown also. Thanks in advance.

Re: jquery msdropdown

Hi,

Check this post-

http://forums.asp.net/p/1759576/4789371.aspx/1?Re+JQuery+Code+not+working+properly+after+cascading+dropdownlist+is+used+

Re: jquery msdropdown

Hi,

I am getting an error on pointing the mouse over the items of dropdown after the postback as

"Microsoft JScript runtime error: 'nodeType' is null or not an object." in jquery.tooltip.js file

That's why it is not displaying the tooltips. Why this error is coming, any idea?

Re: jquery msdropdown

Hi, please add the following codes to your markup and check the result again:

$(document).ready(function () {
            Sys.WebForms.PageRequestManager.getInstance().add_endRequest(callAfterInitialization);
        });

Re: jquery msdropdown

Give the Dropdown a css class then add this..

$(".CssClassName").tipTip();

That's it...