CFbubu
asked on
How to modify tooltip code from onfocus to on page load?
The block of code below results in 2 different tool tip effects when a user clicks into 2 input text fields.
How can I change it to show the tool tips when the page loads, and also I want the tool tips to show when the mouse hovers above a DIV tag instead of clicking into those input fields?
I am looking for a way for to display a tooltip when the page first loads. This tooltip should remain on display until the user manually clicks on it to close it out. The tool tip should re-appear again if the user's mouse hovers above the specific <DIV></DIV> tag after the user first closed it out when it first appeared during page load. I am NOT looking for a tooltip that only works for textfield inputs. I am looking for one that works with the mouse hovering over DIV tags.
Thanks very much.
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.cs
<style type='text/css'>
#myTT, #myTT2 {
display: none;
border: 1px solid #000;
background-color: #baf;
padding: 10px;
width: 200px;
position: absolute;
margin-left: 10px;
}
#myText2 {margin-top: 20px; margin-left: 20px;}
</style>
<script type='text/javascript'>//<
$(document).ready(function
// Simpler version that positions the DIV based on the location of the
// input that called it
$('#myText').focus(functio
var tBoxPos = $(this).position();
$('#myTT').css("top", tBoxPos.top + 'px').css("left", tBoxPos.left + $(this).innerWidth() + 'px').show(300);
});
$('#myText').blur(function
$('#myTT').hide();
/*$('myText').trigger('mou
});
// This one takes into account the margin-top applied to myText2 and
// adjusts accordingly.
// Also uses "fold" effect from jQuery UI library to animate nicer
$('#myText2').focus(functi
var tBoxPos = $(this).position();
var tipTop = tBoxPos.top + parseFloat($(this).css("ma
var tipLeft = tBoxPos.left + parseFloat($(this).css("ma
$('#myTT2').css("top", tipTop).css("left", tipLeft).show("fold", 500);
});
$('#myText2').blur(functio
$('#myTT2').hide();
});
});//]]>
</script>
<fieldset>
<legend>Example Textboxes</legend>
<label>Enter Text - <input id="myText" type="text" /> (required)</label><br>
<div id="myTT">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. c, tempus nec, condimentum ac, tellus. Morbi pellentesque, libero sit amet porta accumsan, dolor orci mollis ipsum, sagittis dictum leo odio eleifend sapien. </div>
<label>Even More Text - <input id="myText2" type="text" /></label>
<div id="myTT2">Morbi facilisis. Quisque vehicula. Morbi gravida quam nec dui. Donec convallis, sem vel luctus scelerisque, diam sapien laoreet tellus, eu condimentum sapien elit ac turpis. Sed eget neque.</div>
</fieldset>
How can I change it to show the tool tips when the page loads, and also I want the tool tips to show when the mouse hovers above a DIV tag instead of clicking into those input fields?
I am looking for a way for to display a tooltip when the page first loads. This tooltip should remain on display until the user manually clicks on it to close it out. The tool tip should re-appear again if the user's mouse hovers above the specific <DIV></DIV> tag after the user first closed it out when it first appeared during page load. I am NOT looking for a tooltip that only works for textfield inputs. I am looking for one that works with the mouse hovering over DIV tags.
Thanks very much.
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.cs
<style type='text/css'>
#myTT, #myTT2 {
display: none;
border: 1px solid #000;
background-color: #baf;
padding: 10px;
width: 200px;
position: absolute;
margin-left: 10px;
}
#myText2 {margin-top: 20px; margin-left: 20px;}
</style>
<script type='text/javascript'>//<
$(document).ready(function
// Simpler version that positions the DIV based on the location of the
// input that called it
$('#myText').focus(functio
var tBoxPos = $(this).position();
$('#myTT').css("top", tBoxPos.top + 'px').css("left", tBoxPos.left + $(this).innerWidth() + 'px').show(300);
});
$('#myText').blur(function
$('#myTT').hide();
/*$('myText').trigger('mou
});
// This one takes into account the margin-top applied to myText2 and
// adjusts accordingly.
// Also uses "fold" effect from jQuery UI library to animate nicer
$('#myText2').focus(functi
var tBoxPos = $(this).position();
var tipTop = tBoxPos.top + parseFloat($(this).css("ma
var tipLeft = tBoxPos.left + parseFloat($(this).css("ma
$('#myTT2').css("top", tipTop).css("left", tipLeft).show("fold", 500);
});
$('#myText2').blur(functio
$('#myTT2').hide();
});
});//]]>
</script>
<fieldset>
<legend>Example Textboxes</legend>
<label>Enter Text - <input id="myText" type="text" /> (required)</label><br>
<div id="myTT">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. c, tempus nec, condimentum ac, tellus. Morbi pellentesque, libero sit amet porta accumsan, dolor orci mollis ipsum, sagittis dictum leo odio eleifend sapien. </div>
<label>Even More Text - <input id="myText2" type="text" /></label>
<div id="myTT2">Morbi facilisis. Quisque vehicula. Morbi gravida quam nec dui. Donec convallis, sem vel luctus scelerisque, diam sapien laoreet tellus, eu condimentum sapien elit ac turpis. Sed eget neque.</div>
</fieldset>
Here's an example of what I am suggesting.
<script type="text/javascript">
$(document).ready(function(){
$(window).bind('load', function(){
$('input.inputBox').each(function(){
var tBoxPos = $(this).position();
$(this).parent('label').next('div').css("top", tBoxPos.top + 'px').css("left", tBoxPos.left + $(this).innerWidth() + 'px');
$(this).parent('label').next('div').animate({
width:'200px',
height:'230px'
});
});
});
$('div.toolTips').bind('click', function(){
var w = $(this).css('width') == '15px'?'200px':'15px';
var h = $(this).css('height') == '20px'?'230px':'20px';
$(this).animate({
width: w,
height: h
});
});
});
</script>
<style type="text/css">
div.toolTips {
border: 1px solid #000;
background-color: #baf;
width: 20px;
height:20px;
position: absolute;
overflow:hidden;
}
div.toolTips p {
padding:10px;
margin-left: 10px;
}
div.toolTips div {
font-size:1em;
color: purple;
position:relative;
width:15px;
height:20px;
top:0;
left:0;
padding:3px;
float:left
}
</style>
<fieldset>
<legend>Example Textboxes</legend>
<label>Enter Text - <input id="myText" type="text" class="inputBox" /> (required)</label>
<div class="toolTips"><div>? </div><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. c, tempus nec, condimentum ac, tellus. Morbi pellentesque, libero sit amet porta accumsan, dolor orci mollis ipsum, sagittis dictum leo odio eleifend sapien. </p></div>
<br /><br />
<label>Even More Text - <input id="myText2" type="text" class="inputBox" /></label>
<div class="toolTips"><div>? </div><p>Morbi facilisis. Quisque vehicula. Morbi gravida quam nec dui. Donec convallis, sem vel luctus scelerisque, diam sapien laoreet tellus, eu condimentum sapien elit ac turpis. Sed eget neque.</p></div>
</fieldset>ASKER
Hi tommyBoy,
Can your solution also work without input form fields?
Instead of using the input text field below to load the tooltip, can I use a DIV tag instead to trigger it?
<label>Enter Text - <input id="myText" type="text" class="inputBox" /> (require
Use this method instead:
<DIV id="myText">The tool tip for this statement will pop up on load</DIV>
I tried making the tool tip appear for the DIV tag above, but it would not work.
Thanks for clarifying.
Can your solution also work without input form fields?
Instead of using the input text field below to load the tooltip, can I use a DIV tag instead to trigger it?
<label>Enter Text - <input id="myText" type="text" class="inputBox" /> (require
Use this method instead:
<DIV id="myText">The tool tip for this statement will pop up on load</DIV>
I tried making the tool tip appear for the DIV tag above, but it would not work.
Thanks for clarifying.
I'm a little confused by your question. In my example, the inputs are not triggering the divs to display. I'm not using "focus" or "blur" for any action. The triggers are the divs themselves. They expand on page load and collapse down to a 20 x 15 rectangle when clicked for the first time after load. Click the 20 x 15 rectangles anytime after that and they expand/collapse. I removed the "display:none" from the tooltip divs so they would be visible all the time and I am only changing the size. So to answer your question, my solution IS working without input form fields. I'm only using them to determine the initial position of the tooltip divs.
ASKER
Thanks tommyBoy,
I got it now.
Btw, the expanding tooltip box sizes are hard coded. Will it be possible for the box sizes to be dynamic and expand according to how much content is in the DIVs?
Thanks!
I got it now.
Btw, the expanding tooltip box sizes are hard coded. Will it be possible for the box sizes to be dynamic and expand according to how much content is in the DIVs?
Thanks!
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Really sorry about the super long feedback. I was so engrossed I completely forgot to check back on the site :(. But you have been super helpful!
Good timing! I needed to make my monthly requirement for points so I could get back to my regular work. This question put me over the top for October. Thanks.
If the <div> is closed (hidden) then how does the user hover over it?
What I have seen is the use of a small box with a ? inside. When the user hovers or clicks on that, the small box expands to reveal the whole tooltip.