[Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 327
  • Last Modified:

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.css">
 
  <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'>//<![CDATA[
$(document).ready(function(){
// Simpler version that positions the DIV based on the location of the
// input that called it
$('#myText').focus(function() {
    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('mouseover'); */
      
});

// 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(function() {
    var tBoxPos = $(this).position();
    var tipTop = tBoxPos.top + parseFloat($(this).css("margin-top")) + 'px';
    var tipLeft = tBoxPos.left + parseFloat($(this).css("margin-left")) + $(this).innerWidth() + 'px';

    $('#myTT2').css("top", tipTop).css("left", tipLeft).show("fold", 500);
});

$('#myText2').blur(function() {
    $('#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>
0
CFbubu
Asked:
CFbubu
  • 5
  • 3
1 Solution
 
Tom BeckCommented:
I'm not understanding this part:
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.
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.
0
 
Tom BeckCommented:
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" /> &nbsp;&nbsp;&nbsp;(required)</label>
<div class="toolTips"><div>?&nbsp;</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>?&nbsp;</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>

Open in new window

0
 
CFbubuAuthor Commented:
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" /> &nbsp;&nbsp;&nbsp;(required)</label>

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.
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
Tom BeckCommented:
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.
0
 
CFbubuAuthor Commented:
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!
0
 
Tom BeckCommented:
Possible, yes, but it means you would have to determine the height of each tooltip and save it in a variable so you can re-apply it when the user clicks the small box. That means separate click handlers for each tooltip because each can be a different height.
$(document).ready(function(){
	
var myTTheight = $('#myTT').height();
var myTT2height = $('#myTT2').height();
	
$(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');
		var h = $(this).parent('label').next('div').height() + 'px';
		$(this).parent('label').next('div').animate({
			width:'200px',
			height: h
		});
	});
});

$('#myTT').bind('click', function(){
	var h = $(this).css('height') == '20px'?myTTheight + 'px':'20px';
	var w = $(this).css('width') == '15px'?'200px':'15px';
	$(this).animate({
		width: w,
		height: h
	});  
});

$('#myTT2').bind('click', function(){
	var h = $(this).css('height') == '20px'?myTT2height + 'px':'20px';
	var w = $(this).css('width') == '15px'?'200px':'15px';
	$(this).animate({
		width: w,
		height: h
	});  
});
});

Open in new window


The css changes as well because you now want to leave the height out of the css.

div.toolTips {
 border: 1px solid #000;
 background-color: #baf;
 width: 200px;
 position: absolute;
 overflow:hidden;
}
 div.toolTips p {
 padding:10px;
 margin-left: 10px;
 }
 div.toolTips div {
 font-size:1em;
 color: purple;
 position:relative;
 width:15px;
 top:0;
 left:0;
 padding:3px;
 float:left
 }
0
 
CFbubuAuthor Commented:
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!
0
 
Tom BeckCommented:
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.
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

  • 5
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now