I have an LI with A tag in it.
<li title="LI TEXT" id="test">
ELEMENT WITH HREF HREF
</li>
I want to create jquery tooltip for the LI and default tooltip for its child elements. But this does it both for the jquery elements for LI and its childs.
$("#test").tooltip();
http://jsfiddle.net/k45emuhg/
Okay, what you've described is quite easy with the items option. Simply include a selector restriction for the items you want to show their tooltips, e.g. the same as the original selector that you're calling .tooltip() on:
$("#test").tooltip({items: "#test"});
The question doesn't make this explicit, but you probably also want to show only one (rather than 2) tooltips when you hover over the children element. To do that, you can disable and reenable the parent's tooltip on the mouseenter and mouseleave events. JQuery provides a nice shortcut for that with the hover function:
$("#test a").hover(function() {
$(this).parent().tooltip("disable");
}, function() {
$(this).parent().tooltip("enable");
});
Note that you can use any relevant selector, not necessarily $(this).parent(), depends on how your HTML is structured
Here's the example fiddle updated: http://jsfiddle.net/957r8x51/
Related
Question is that the clone helper on jQuery Sortable is not showing itself with the following settings:-
$('#sortable').sortable({
items: "li",
helper: "clone",
appendTo: "body",
placeholder: "ui-state-highlight"
});
Essentially, the placeholder is being shown, but the actual helper cloned element is not.
appendTo and helper are necessary because without the helper and appendTo, when I seek to drag the LI element, the li element will sometimes disappear and be deleted when dropped.
I can confirm there is no overflow css on the parent <ul> and that the disappearing <li> also happens when appendTo is set to parent. Containment did not prevent the <li> from disappearing.
I am using jQuery UI 1.10.2. Anyone konw how to address this?
EDIT: To be clear, I've identified that the item is disappearing into a child sortable, because there are intersecting divs in the list structure containing child sortable elements.
Is it possible to reject an LI element with a certain class from a sortable? Whats happening is that the LI is dropping into the child sortable even though it has no connectWith The LI needs to only be sortable inside its parent sortable and not try to insert itself in a child sortable (they even have separate ids and separate classes so not sure why this is happening).
Partial Solution:
stop: function(event, ui){
if(ui.item.parent().attr('id') !== 'sortable'){
$("#sortable").sortable("cancel");
}
},
If anyone has a better solution, please do let me know.
I have a td which I do not want to have a title attribute.
Within that td are some display stuff, and an input type="hidden"
I want to use jquery ui tooltip to display the value of the hidden input item
Everything is dynamic, so I was hoping to use the tooltip "open" method to override tooltip contents.
Any advice ? I have not been able to get anything to work. The event will trigger, but I'm blowed if I can see how to update the tooltip content on the fly.
I'd like to move around a list item with the sortable jQuery UI helper. I want to use some sort of handle : being able to move the whole div but only when using that handle. I don't want the div to move when clicking elsewhere than the handle.
Any idea how to do that ? I searched the documentation and didn't find anything. My only current idea would be to set some sort of function that enables the sortable state when I press the handle and disable it when I release the mouse but it feels sloppy.
Use the handle option:
$(document).ready(
function()
{
$('#sortable_list').sortable({axis: 'y', handle: '.handle'});
}
);
I'm using JQuery UI Sortable to allow reordering elements within a list when dragging element. I would like to improve this processing by allowing reordering only when dragging from an icon present in each element (this icon is a span within the li) not for the whole element.
Is it possible to do this with Sortable?
Thanks very much for your help!
Thierry
Yes, jQuery-UI provides a "handle" option:
http://jqueryui.com/demos/sortable/#option-handle
Restricts sort start click to the specified element...
Initialize a sortable with the handle option specified.
$( ".selector" ).sortable({ handle: 'h2' });
I am working on drag and drop tool using jQuery UI's sortable widget.
I'd like to add a message into an empty div where something can be dragged into, like: "drag here". I'd like to remove this message as soon as something is in that div. There will be times when the page loads with something already in that div, so it can't be only on action, but onload needs to check it too.
How do I go about it?
Here's my code:
$("#divFrom, #divTo").sortable({
connectWith: '.connectedSortable'
}).disableSelection();
You should be able to set up a draggable, and droppable and tap into droppable's drop event handler, which is fired when an item is dropped:
$("#target").droppable({
drop: function() {
// Empty the droppable div:
$(".message").remove();
}
});
Demo here: http://jsfiddle.net/andrewwhitaker/rUgJF/2/
As for doing something similar on load, if you provided your markup it would make providing a solution a little easier (is there a specific element inside the droppable div that you could check for?)
Hope that helps.