I cannot make tooltip to work on appended element.
Fiddle is here: http://jsfiddle.net + jeffz2012/4xwM9/8/ (cannot make this link to work)
Code is here:
//css:
//---------
.mrg {
margin: 15px;
}
.hand {
cursor: pointer;
}
.help {
cursor: help;
}
.brd {
padding:7px;
border: solid 1px #ccc;
}
//html:
//---------
<div class="mrg tip brd help" title="I am a regular tooltip">point mouse here for non appended tooltip</div>
<div id="trig" class="mrg hand brd">now click here, to append another div</div>
<div id="rec" class="mrg" title="I am appended tooltip, but I do not work"></div>
//jquery
//---------
$('#trig').on('click', function() {
$('#rec').append('<div class="help brd tip">this is appended element and should show tooltip on hover</div>');
});
$( '.tip' ).tooltip({
open: function( event, ui ) {
ui.tooltip.animate({
top: ui.tooltip.position().top + 10
}, "fast" );
},
position: {
my: "center botto",
at: "center top+10",
collision: "flipfit"
}
});
If I got you right, this is the solution:
http://jsfiddle.net/4xwM9/9/
You have to initialize tooltip for appended div.
$('#trig').on('click', function() {
var $addedTooltip = $('<div class="help brd tip">this is appended element and should show tooltip on hover</div>');
$('#rec').append($addedTooltip);
$addedTooltip.tooltip();
});
go to jQuery.tipsy.js file change live: false, to true on line 175
Related
I'm facing a trouble with droppable/draggable plugin of Jquery UI.
If I have two elements, not-nested, but overlapped due to css structure, the drop function is thrown for both elements.
How can I prevent to the background element to get the drop?
This is an example:
https://jsfiddle.net/vq4x0b8L/2/
HTML
<div id="contenitore">
<div id="carrello">
<p>Drop here</p>
</div>
<div id="carrello2">
<p>Drop here</p>
</div>
<div id="fagioli">
<p>Drag me</p>
</div>
</div>
JS
$(function() {
$( "#fagioli" ).draggable();
$( "#carrello" ).droppable({
greedy: true,
drop: function( event, ui ) {
$( this )
.find( "p" )
.html( "Dropped." );
}
});
$( "#carrello2" ).droppable({
greedy: true,
drop: function( event, ui ) {
$( this )
.find( "p" )
.html( "Dropped." );
}
});
});
CSS
#contenitore {position: relative; width: 500px; height: 500px;}
#carrello {background: #ccc;width:400px;height:500px;}
#carrello2 {background: #ddd; width:300px;height:250px; position: absolute; bottom: 0px;}
#fagioli {background: #822222;width:70px;height:90px;position: absolute; top: 200px; right: 10px;}
#fagioli:hover {cursor:move}
I tried the "greedy" option, but it doesn't work, probably it is designed for nested elements.
I found a way to do it.
Example: https://jsfiddle.net/Twisty/dezt5bmf/10/
JavaScript
$(function() {
$("#fagioli").draggable();
$("#carrello").droppable({
drop: function(event, ui) {
console.log("Dropped on " + $(this).attr("id"));
$(this)
.find("p")
.html("Dropped.");
}
});
$("#carrello2").droppable({
tolerance: "touch",
drop: function(event, ui) {
console.log("Dropped on " + $(this).attr("id"));
$(this)
.find("p")
.html("Dropped.");
$("#carrello").droppable("option", "accept", "*");
},
over: function(event, ui) {
$("#carrello").droppable("option", "accept", ".snowflake");
}
});
});
When the Draggable is Over the 2nd droppable, we adjust the accept option to something that is not the draggable element. This way when drop happens, it is not interested in it. Once the dropped is performed, we can switch it back to accept all items.
You can also disable the dropables, yet this causes additional Styles to be applied. Changing the accept does not.
I have a table and need to drag/drop cells containing data into blank cells. I'm able to drag and drop fine, but once a cell is dragged away, I need its "old" position to now become a droppable cell. Since the cell is dragged, I need something else to reference. I ended up wrapping each of the td elements in a div element, but all references return "undefined" on the inner cellDiv id (or return the outer tableDiv id). On the fiddle, I notice that the blue background is not appearing so I don't think the 'cellDiv' is doing much.
Next I am going to try swapping the td and cellDiv elements, but I decided to post the question first, as I've searched everywhere and cannot seem to find this specific problem addressed. Thanks for your help.
here is the problem in a jsfiddle: http://jsfiddle.net/tgsz34hx/3/
And the code:
<div id='tableDiv'>
<table>
<tr id='row1'>
<div class='cellDiv' id='r1c1'>
<td class='drop' id='col1'>Drop Here</td></div>
<div class='cellDiv' id='r1c2'>
<td class='nodrop' id='col2'>Drag Me</td></div>
</tr>
</table>
</div>
$(document).ready(function () {
var fromDiv;
$('.nodrop').draggable({
cursor: "move",
appendTo: "body",
revert: "invalid",
start: function (event, ui) {
var thisDiv = $(this).attr('id');
fromDiv = $(this).closest('.cellDiv').attr('id');
alert("thisDiv=" + thisDiv + ", fromDiv=" + fromDiv);
}
});
$('.drop').droppable({
accept: ".nodrop",
tolerance: "pointer",
snap: ".drop",
drop: function (event, ui) {
var parenttd = $(ui.draggable).closest('td').attr('id');
var parentdiv = $(ui.draggable).closest('.cellDiv').attr('id');
// alert("parenttd=" + parenttd + ", parentdiv=" + parentdiv);
$(this).removeClass('drop');
$(this).addClass('nodrop');
$(this).droppable('option', 'disabled', true);
}
});
});
#tableDiv {
background-color: grey;
}
#tableDiv td {
background-color: red;
}
#tableDiv div {
background-color: blue;
}
My element styling depends on the element order. Since jQuery UI keeps the original item while dragging a helper hidden, the hidden element breaks the styling. I can remove the ui.item upon starting the drag event. Though, how can I restore the element after it was removed?
http://jsfiddle.net/MnSRd/8/
HTML
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
CSS
ul { height: 50px; }
li { float: left; width: 50px; height: inherit; background: #ccc; margin: 0 10px 0 0; }
li.placeholder { background: #f00; }
li:nth-child(1):before { content: '1'; }
li:nth-child(2):before { content: '2'; }
li:nth-child(3):before { content: '3'; }
li:nth-child(4):before { content: '4'; }
li:nth-child(5):before { content: '5'; }
JavaScript
$('ul').sortable({
helper: 'clone',
placeholder: 'placeholder',
start: function (e, ui) {
console.log(ui.item.remove()); // temporary remove
},
beforeStop: function (e, ui) {
// how to bring the item back?
}
});
You can first hide() the item and then show() it again. remove() completely removes it from the DOM so you cannot restore it unless you clone() it and then you attach it back or simply use jQuery detach() Updated fiddle.
$('ul').sortable({
helper: 'clone',
placeholder: 'placeholder',
start: function (e, ui) {
ui.item.hide(); // temporary remove
},
beforeStop: function (e, ui) {
ui.item.show();
}
});
After reading the comments I believe that what you want from the sortable is to use helper: 'original' which is the default helper instead of helper: 'clone'.
While this might not be an answer to everyone, it will likely solve any similar issues.
$('ul').sortable({
helper: 'clone',
placeholder: 'placeholder',
start: function (e, ui) {
ui.item.appendTo(ui.item.parent());
}
});
http://jsfiddle.net/MnSRd/11/
Instead of removing the UI element, I am appending it to the end of the parent container. Thus it does not have any effect on the element styling.
I'm using .tooltip for a simple description of each throughout a page. It works fantastic for everything but the title name of the page (not just icons and menus) shows up at the bottom left side of the screen. How can I make an exception for just the title tag that starts with the word "step"? Thanks.
$.widget( "ui.tooltip", {
version: "1.9.2",
options: {
content: function() {
return $( this ).attr( "title" );
},
hide: true,
// Disabled elements have inconsistent behavior across browsers (#8661)
items: "[title]:not([disabled])",
position: {
my: "left top+15",
at: "left bottom",
collision: "flipfit flip"
},
show: true,
tooltipClass: null,
track: false,
// callbacks
close: null,
open: null
},
Just use a normal jquery selector for your items definition:
items: '[title^="step"]:not([disabled])',
should do the trick, for more selector fun, see the jquery selector documentation
#edit:
I just re-read your question, to exclude the items with the word "step" at the beginning of the title, use this:
items: '[title]:not([disabled]):not([title^="step"])',
<style type="text/css">
/* hide the html title tag from on-screen display */
#ui-tooltip-0 {
display: none !important;
visibility: hidden !important;
}
</style>
I have two jQuery UI dialogs which are basically the same. They have the same positions. The problem is that they are displayed in the wrong positions in the browser, not 200 &200 from top & left of the viewport, plus they are not on top of each other.
The x position seems correct but not their y values.
What am I missing?
See JSFiddle example here
Addition:
<script type="text/javascript">
$(document).ready(function()
{
$( "#one" ).dialog({
closeOnEscape: false,
open: function(event, ui) { $(".ui-dialog-titlebar-close").hide(); }, position: [200,200]
});
// $( "#two" ).dialog({
// closeOnEscape: false,
// open: function(event, ui) { $(".ui-dialog-titlebar-close").hide(); }, position: [200,200]
// });
});
</script>
</head>
<body>
<div id="one" style="height: 100px;width: 100px;border: 1px solid red;background-color: #ddd">Hello</div>
<div id="two" style="height: 100px;width: 100px;border: 1px solid red;background-color: #ccc">Hello 2</div>
</body>
It has to do with the position: relative that uid dialog sets.
http://jsfiddle.net/bJEgR/1/
Since I've not worked with this particular plugin before, I'm not sure if this is a good idea or not, but as a proof of concept, it shows that it is the position: relative setting. I used to Firebug to inspect the css.
$( "#one" ).dialog({
closeOnEscape: false,
open: function(event, ui) {
$(".ui-dialog-titlebar-close").hide();
$(".ui-dialog").css('position','absolute');
$(".ui-dialog").css('top','100px');
$(".ui-dialog").css('left','100px');
},
position: [200,200]
});
$( "#two" ).dialog({
closeOnEscape: false,
open: function(event, ui) {
$(".ui-dialog-titlebar-close").hide();
$(".ui-dialog").css('position','absolute');
$(".ui-dialog").css('top','100px');
$(".ui-dialog").css('left','100px');
},
position: [200,200]
});
Wrapping the dialogs with a div which has a declared height seems to fix it. I don't know if this is a bug.