Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery datepicker--how to turn off ellipse tooltip when hovering over little calendar icon

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"
                    });
              });
like image 338
dac Avatar asked Jun 03 '11 04:06

dac


1 Answers

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: ""
                });
           });
like image 63
dac Avatar answered Oct 26 '22 18:10

dac