I'm using the jQuery UI datepicker and the tooltip function from the same collection. Both work perfectly for my application. Except where they both try to work. When I hover on the icons for previous or next months, I get a tooltip popping up that says "Prev" or "Next". When I click on the previous-month icon the tooltip stays visible, completely covering the month and year headline. (On the next-month icon it stays visible but it doesn't interfere. Much.)
The function of these icons is absolutely clear without the tooltip, and badly broken with it, but I can't figure out a way to disable the title="Prev" and title="Next" code.
I actually don't need tooltips anywhere in the datepicker because I'm using it strictly to set a date rather than display events in the calendar.
The solution is to be more specific in the "tooltip" selector.
I changed from:
$(document).tooltip();
to:
$("span.ui-icon").tooltip();
And it work for me now.
After initializing my datepickers I use:
$('.ui-datepicker-trigger').prop('title','');
You can add option for datepicker():
$(".datepicker").datepicker({
hideIfNoPrevNext: true,
minDate: "-2Y"
});
Related
I have two datetimepicker instances on my page. I have hidden the NOW button from one of the datetimepickers by setting display:none on its css for "focus" event.
The strange thing is on IE it hides the NOW button, but when I click on the calendar date, the button comes and goes (flicker). I don't see this behavior on Firefox and Chrome. Any idea why this happens and how to overcome this?
Does it specifically have to hide on focus? If it were always display: none then you likely wouldn't have that problem.
Using jquery datepicker for change month and change year. While testing for accessibility, the tab is not working for the calendar, as in the calendar pops up on using tab, but after that it goes to the next field on using tab again.
Instead it should go to Previous button then Month Dropdown then year dropdown then Next button then all the dates.
Please share any solution if possible.
When the datepicker displays you'd have to get the UI element and change the tabindex properties of the child buttons accordingly.
edit This is actually more difficult, because you have to mess with the onfocus/onblur events as well.
The HTML5 DATE works with tabbing.
<input type="date" />
Is there a setting for highcharts tooltips where you can set it to display on click versus hover?
I have seen a lot of people discussing the tooltip staying on click but then there is still the hover present. Is there a way to disable the hover and use only click?
There is not a setting for that in Highcharts currently.
There is a feature request for this functionality here: http://highcharts.uservoice.com/forums/55896-general/suggestions/2607304-allow-the-tooltip-to-appear-when-a-point-is-clicke
Feel free to add your votes and comments.
UPDATE:
I have started using the jquery UI dialog for this purpose.
I disable the tooltip in Highcharts, and add a click event to the point in the plotOptions.
In that click function I call an external function, sending it the point object, and build my tooltip within the dialog.
http://jqueryui.com/dialog/
http://api.highcharts.com/highcharts#plotOptions.series.point.events.click
You could also use Highslide for this purpose, and keep it all in the family.
http://highslide.com/
Working example:
http://jsfiddle.net/jlbriggs/LHZ3E/embedded/result/
Adding for those who has problems like me with useHTML: true and wants to display tooltip only on click and not on hover and wants to have only one tooltip on screen.
Here is a fiddle.
I'm sure I'm not the only person asking this question. When you have a jQuery UI implementation, and you use the .buttonset(); command to turn a set of checkboxes into a button-set (multi selectable), I'm having trouble when a user de-selects an item after selecting it.
So let's say on hover, it turns into a certain colour (based on the settings of the jQueryUI theme I downloaded), and after clicking, it turns into the active state colour. When I click the same item again, and move the mouse away, it remains the hover colour, causing confusion as to whether the item is deselected or not.
And this only happens on Firefox only - seems to work fine on Chrome & Safari.
Here's a demo link: http://www.tylervolker.com/mls-search
I tried to force a blur() event to these items but no dice it seems.
$('.label').click(function(){
$(this).blur();
});
What am I missing? Or is this just a Firefox thing I need to live with until either jQueryUI updates their code, or Firefox appends this?
This appears to be this known jQuery UI bug - http://bugs.jqueryui.com/ticket/5518. The button widget isn't set to be addressed by the jQuery UI dev team until 1.11 so I wouldn't expect a fix for this anytime soon.
There are some suggested workarounds in the related issues on that ticket.
Sorry for the simple question.
I'm using a jQuery DatePicker. I want the little calendar icon to appear next to the text input area. I'm using the Smoothness jQuery UI theme.
Does jQuery UI include the calendar.gif icon (not the datepicker itself, but just the little icon)? If not, can you suggest where I can get a free small calendar.gif?
As I understand it, I add the calendar as follows:
buttonImage: 'images/calendar.gif'
Thank you.
You could use the built in icons from jQuery UI; there is a calendar icon. The code is something like:
$("#datepicker").datepicker({
showOn: 'button'
}).next('button').text('').button({
icons: {
primary: 'ui-icon-calendar'
},
text: false
});
See it in action: http://jsfiddle.net/william/rrcmq/.
It is inspired by this article: http://www.somethinghitme.com/2010/10/06/use-built-in-jquery-ui-icon-with-datepicker/.
I far as I know it does not. I provided my own when I used the datepicker with one but I already had an icon.
You can google it but there are some free icons here: http://findicons.com/search/calendar
Just go to JQueryUI site then click Demo and choose Dateicker and select icon trigger example. You will on this page(datepicker icon-trigger example), and the page will look like below picture.
Now you right click on the calendar icon marked by yellow and download it by choose "Save Image As..." and include it in your project than buttonImage: 'images/calendar.gif' will work fine.