I am thinking someone may have run across this one, but not sure. From a high level, I am trying to roll over a input [type=text] and display a tool tip (with the contained value) using the plugin available at http://bassitance.de.
I have to use titles and classes for validation on the specific elements, so I put a blank div to hold the input [type=text] value for the roll over.
Issue:
It won't hold the value of 2 text boxes at once. Once I put a value in the box on the right, the tooltip on the left goes away. Same thing if I switch it aroun. I can't keep a tooltip on more than one element.
Here is the code (Note: You will have to download the plugins in the source as I am not sure where the live versions are if there are any).
<link rel="stylesheet" href="/scripts/jquery-tooltip/jquery.tooltip.css" />
<script type="text/javascript" src="/scripts/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="/scripts/jquery-tooltip/jquery.tooltip.min.js"></script>
<script type="text/javascript">
$(function(){
$("input").change(function(){
var newTitle = $(this).val();
$(this).parent().attr("title",newTitle);
// re-init tool tip
reload();
});
// Init tooltip
reload();
});
reload = function(){
$("div").tooltip();
}
</script>
<body>
<table border="1px solid black">
<tr>
<td title="hello">
<div>
<input type="text" value=""/>
</div>
</td>
<td>
<div>
<input type="text" value=""/>
</div>
</td>
</tr>
</table>
<div id="debug"></div>
</body>
</html>