CODEWITHSUNDEEP
jqueryjquery-ui-datepicker
user703895
user703895

Reputation: 31

How to add tooltip and class for jquery datepicker calender image?

HI, how to add tooltip for the button image? Now its displaying ... , instead of this i need to show some text content and need to add a css class for that button image.

Thanks.

Upvotes: 3

Views: 4921

Answers (3)

Senguttuvan Amaladass
Senguttuvan Amaladass

Reputation: 161

try to use the HTML properties of imagebutton. use title property to display your text on moue hover.

or add the css class using jquery like

$("#ImagebuttonID").addClass("myCssClass");

Upvotes: 0

Deepak Kothari
Deepak Kothari

Reputation: 1753

To display Tooltip "Display Calendar" for the default button which appears after the Text Box using jquery datepicker we can use these lines,

   $(document).ready(function () {

$(".ui-datepicker-trigger").on("mouseover", function () {
    $(this).attr('title', 'Display Calendar');  
});

Upvotes: 0

Matt South
Matt South

Reputation: 141

To change the text on button image you need to set the "buttonText" attribute, e.g.

$("#my_date_field").datepicker({
  showOn: "button",
  buttonImage: "/images/calendar.png",
  buttonImageOnly: true,
  buttonText: "Add some new text"
});

To add a css class to the button image you can select the class that the datepicker gives it and add your class, e.g.

$(".ui-datepicker-trigger").addClass("myCssClass");

But the trick with this is that you can only add your code to add the class after the datepicker. If you add it before the datepicker then it wont work.

Upvotes: 9

Related Questions