I am trying to use the jQuery Tool tip function and from the examples I am having issues altering the code for the function I am after.
http://jqueryui.com/tooltip/#forms
I have several coulored Circle area maps that I want a tool tip to pop up from when one is clicked on.
The following function works but it also pops up a tool tip when mousing over the element. Then when you click on it another tool tip pops up.
So What I need, is to change the function to only pop up "on click" and then to fade away after a few seconds.
jQuery:
$(function() {
var tooltips = $( "[title]" ).tooltip();
$( "#01-001" ).click(function() {
tooltips.tooltip( "open" );
})
});
HTML:
<area id="01-001" shape="circle" coords="99,71,10" href="#" alt="01-001" data-maphilight='{"stroke":false,"fillColor":"FF0000","fillOpacity":1,"alwaysOn":true}' title="Tool Tip Messgae." />
Thanks Guys.
Samuel
The simplest solution would be to wait until the click event to instantiate the tooltip. You're getting them on hover because you instantiated them all at once.
There's a detailed answer by here.
Related
I've been searching to see if there is a way to check whether the context menu in a nw.js app has been closed(if you click away from the menu or on another window, etc so that the menu disappears). I haven't been able to find an answer.
I have it working when clicking off, but not when clicking outside the window(I've tried adding blur and focusout to the event but those didn't do anything):
contextMenu.popup(e.x, e.y);
$( document ).one( "click ", function() {
alert(0);
});
Any help figuring out how to solve this would be great.
Alright, figured it out, had to include this;
var win = gui.Window.get();
win.on('blur', function() {
alert(0);
});
I'm developing jQuery Mobile (jQm) app.
I wanna utilize taphold event to some crucial elements, such as remove button, to assure, that this element is secured from unwanted trigger.
I created Remove button on jQm popup and aded some JS to it, but I cannot force default action to quit, not with event.preventDefault() and event.stopImmediatePropagation(), nor with return false.
I prepared jsFiddle as duplicate of my code. The popup there contains simple progress bar as indicator of holded tap. You can try it here: jsFiddle (note: HTML5 data tag taphold="true" is not jQm default)
As a workaround, I'm currently replacing <a href="#" data-role="button"...></a> with <div>styled like button. This works well, since it doesn't have any default action, but I'm curious why the "proper" solution doesn't work?
$("a:jqmData(taphold='true')").bind("vmousedown vmouseup", function(event) {
event.preventDefault();
event.stopImmediatePropagation();
The event.preventDefault(); and event.stopImmediatePropagation(); used in the above piece of code, refer to the vmousedown and vmouseup events and not to every event which is bound to the selected element(s).
This means that the default behaviour for the click event still exists. So when you click the remove button, the click event is triggered and that's why the pop up closes immediately.
I hope this helps.
I set up the tooltip and dialog like so:
$(document).ready(function() {
$( "#dialog" ).dialog({ autoOpen: false });
$( document ).tooltip();
but when i open the dialog later its close tooltip always appears on opening, NOT just on hovering over close as expected. Has anyone else seen this behaviour/knows why it occurs?
Setting the items option to exclude the dialog's titlebar close widget seems to work well for me in jQueryUI 1.9+
$( document ).tooltip({
items: '*:not(.ui-dialog-titlebar-close)'
});
Found a solution:
$( "*" ).tooltip();
$('.ui-dialog-titlebar-close').tooltip('disable')
works in place of the above
Tooltip appears because a button automatically gets focus when a dialog opens (this is a strange behavior). You need to add an attribute "tabindex" to any element in the dialog to avoid this.
For example:
<table tabindex="1">
According to dialog's documentation:
Upon opening a dialog, focus is automatically moved to the first item
that matches the following:
The first element within the dialog with the autofocus attribute
The first :tabbable element within the dialog's content
The first :tabbable element within the dialog's buttonpane
The dialog's close button
The dialog itself
So my solution was to add autofocus to an empty div at the top of the form I was using in my dialog:
<form action="" method="post" accept-charset="utf-8">
<div class="stealFocus" autofocus></div>
Good solution for me with 1.11.3 jQuery and 1.10.4 jUI
$.ui.dialog.prototype._focusTabbable = function(){};
It will desactivate autofocus and dont see auto popup anymore
I use :
$( ".selector" ).dialog({ closeText: "" });
If you see this fiddle you will notice that in order to spawn the Tooltip the mouse has to leave and reenter the div foo after the Tooltip has been initialized.
I thought that maybe I could manually trigger the Tooltip using tooltip("open"). Unfortunately, the mouse tracking doesn't work when I do that. See this fiddle.
Does anyone have an idea how I could get the Tooltip to open with mouse tracking enabled without having to leave and reenter the div? In case you are wondering why I need to do this, I am working with WebGL in a canvas element that takes up the entire screen.
I am using the track: true option and I faced to the same problem in a different context. I am working with richfaces and have some ajax calls which rerender parts of a page.
After each rerender, i needed to rebuild tooltips present in the rerendered part so i decided to attach an event handler to the document and to rebuild thoses tooltips on mouseenter, and then manually open them by calling $(...).tooltip('open')... tooltips are displayed correctly but the mouse tracking doesn't work anymore.
So instead of using $(...).tooltip('open'), i trigger a mouseenter event and work with css class to init only once :
jQuery(document).on('mouseenter', '.tt', function() {
jQuery(this).tooltip({
content: function() { ... },
items: ".tt, .ttped",
track: true
})
.toggleClass('tt ttped')
.trigger('mouseenter');
});
I edited your jsFiddle, which rebuild tooltip each time you enter on #foo and another one which init tooltip only once (static content)
I'm using the jQuery UI Datepicker for a project, but need the today button to enter the date into the textfield when a user clicks on it. By default it just selects the date but doesn't enter it into the field. I'm guessing this will just require a quick mod of my jQuery UI file, but what do I change? Thanks.
Edit: I tried this: http://dev.jqueryui.com/ticket/4045 but it doesn't work!
I found a solution that works here: http://forum.jquery.com/topic/jquery-ui-datepicker-today-button. Just use this snippet of jQuery (I just put it in with my datepicker init code):
$('button.ui-datepicker-current').live('click', function() {
$.datepicker._curInst.input.datepicker('setDate', new Date()).datepicker('hide');
});
The only problem I had was that focus would remain in the input box after clicking the "today" button, which means you cant click it again to select a different date. This can be fixed by suffixing blur():
$('button.ui-datepicker-current').live('click', function() {
$.datepicker._curInst.input.datepicker('setDate', new Date()).datepicker('hide').blur();
});
I also didn't like the styling on the "today" button - maybe it was just my theme or something, but the today button was kind of greyed out compared to the "done" button. This can be fixed with the following CSS (may vary for different themes, i'm not sure):
/* This edit gives five levels of specificity, thus making it override other styles */
.ui-datepicker div.ui-datepicker-buttonpane button.ui-datepicker-current {
font-weight: bold;
opacity: 1;
filter:Alpha(Opacity=100);
}
I realize this is somewhat of a late reply, but I just ran in to this issue and the solution proved works like a charm.
However, the button-styling issue is caused by jQuery ui classes.
I added the following code to the click action of the date text-input:
$('.date').click(function() {
$('button.ui-datepicker-current').removeClass('ui-priority-secondary').addClass('ui-priority-primary');
});
This removes the wrong class, and adds the correct class to the button, making it the same as the "Done" button.
It should not matter what theme you are using.
For completeness, here's my entire code:
$('.date').datepicker({
dateFormat: 'yy-mm-dd',
showButtonPanel: true
}).click(function() {
$('button.ui-datepicker-current').removeClass('ui-priority-secondary').addClass('ui-priority-primary');
});
$('button.ui-datepicker-current').live('click', function() {
$.datepicker._curInst.input.datepicker('setDate', new Date()).datepicker('hide').blur();
});
Just add a <input type="text" class="date" value="" />, and you're good to go.