Response title
This is preview!
[solved] tooltip in a dialog pop up without hovering.
in Using jQuery UI
•
6 months ago
Hi, I'm using the new jquery tooltip to show help instructions for filling up a form. The form is a modal form that I show with ui dialog.
As I wrote in the subject when I open the dialog the first tooltips open without hovering it, and it cover the input.
I've set up a test case here:
http://jsbin.com/ozuset/2/edit
The code is this:
HTML
As I wrote in the subject when I open the dialog the first tooltips open without hovering it, and it cover the input.
I've set up a test case here:
http://jsbin.com/ozuset/2/edit
The code is this:
HTML
- <!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<h1>The problem:</h1>
<p>When I put a helptip in a dialog when I open the dialog the tooltips pop ups without hovering it.
You can test it opening the dialog with the button below:
</p>
<div id="dialog">
<label>
<a href="#" class="ht" data-help="Some help text here"></a>
<span><- Hover Here</span>
<input type="text" /><!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<h1>The problem:</h1>
<p>When I put a helptip in a dialog when I open the dialog the tooltips pop ups without hovering it.
You can test it opening the dialog with the button below:
</p>
<div id="dialog">
<label>
<a href="#" class="ht" data-help="Some help text here"></a>
<span><- Hover Here</span>
<input type="text" />
</label>
<br />
<label>
<a href="#" class="ht" data-help="help for filling the form"></a>
<span>Field label</span>
<input type="text" />
</label>
</div>
<a href="#" id="openDialog">Click to open the dialog</a>
</body>
</html>
CSS
- #dialog {
display:none;
}
.ht {
float:left;
}
label {
display:block;
height:30px;
}
label span {
display:block;
float:left;
width:140px;
}
Javascript:
- $(function(){
$('.ht').click(function(e) {
e.preventDefault();
});
$('.ht').button({'text' :false,
'icons': { primary: "ui-icon-help" }
});
$('.ht').tooltip({
items: "[data-help]",
content: function() {
return $(this).attr("data-help");
}
});
$('#openDialog').click(function(e) {
e.preventDefault();
$('#dialog').dialog({title: 'My modal form',
modal : true,
overlay: { backgroundColor: '#000',
opacity: 0.5},
buttons: {'Ok' : function() { $(this).dialog('destroy'); }},
close: function(event, ui) {
$(this).dialog('destroy');
},
heigth: '450px',
width: '600px'
});
});
});
Do you have any suggestion to avoid this behaviour?
Thank you.
Thank you.
1
