Question

I’m using the datepicker with icon (little calendar). When I hover over it with my mouse before clicking on it to get the datepicker calendar, an annoying little light gray box with an ellipse shows up (tooltip?) in all browsers. It’s ugly! How do I get rid of it? I see it on this demo pagefor the plug-in, so it’s not just my code. It must be a default because I didn’t set it anywhere and don’t see where to set or reset it. (I’m using php.) How can I turn it off or replace the ellipse with something meaningful?

HTML

<p><input type='text' id='CO' class="date-pick" name='CO'>

JQuery

    $(function() {
        //set your date picker
            $("#CO").datepicker({
            dateFormat: 'mm/dd/yy',
            changeMonth: true,
            changeYear: true,
            showOn: "both",
            buttonImage: "css/images/calendar-green.gif",
            buttonImageOnly: true,
            buttonImageText: "Calendar"
                    });
              });

Answer 1

I finally figured this out. It’s described under options at jQuery Datepicker Options. The option is called buttonText. In my code, I had buttonImageText. Wrong!

To show “Calendar” in the tooltips, the option should be:

buttonText: "Calendar"

To get rid of the tooltip, the option should be:

buttonText: ""

The full code looks like:

JQuery

    $(function() {
        //set your date picker
            $("#CO").datepicker({
            dateFormat: 'mm/dd/yy',
            changeMonth: true,
            changeYear: true,
            showOn: "both",
            buttonImage: "css/images/calendar-green.gif",
            buttonImageOnly: true,
            buttonText: ""
                });
           });