Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

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

Pop up a hint window when onfocus in a text field?

Hi,

I was wondering if it was possible to pop up a hint window when a user clicks into a text field? The hint window should be able to hold enough text to explain to the user about the special requirements about the information they want to submit in that specific text field.

If this was  possible, could some sample code be shown to accomplish this?

Thanks alot folks!
0
CFbubu
Asked:
CFbubu
  • 7
  • 2
  • 2
1 Solution
 
Loganathan NatarajanLAMP DeveloperCommented:
You could try with like this library, http://www.menucool.com/tooltip/javascript-tooltip
0
 
CFbubuAuthor Commented:
Hi,

Thanks for your link. However, as I when i looked at the material, it does not give any examples of how one could apply this to an onclick event inside a text input field.

Could I trouble you to show me a sample code of how to get this to work?

Thanks again.

Any other kind feedbacks would also be very appreciated! :)
0
 
Loganathan NatarajanLAMP DeveloperCommented:
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
CFbubuAuthor Commented:
Ahh... I do see it worked as a text field example, but I am disappointed that the tool tip dissappears when the user clicks into the text field. DO you think that is a way to have a method where the tool tip will remain visible as long as the user's curser is inside the text field?

Thanks!
0
 
WebDevEMCommented:
It may not have the standard "tooltip" functionality of moving when the mouse moves, but something like this might do what you're looking for:
Enter Text - <input id="myText" type="text" />
<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>

Open in new window

$('#myText').focus(function() {
    var tBoxPos = $(this).position();
   $('#myTT').css("top",tBoxPos.top + 'px').css("left",tBoxPos.left + $(this).innerWidth() + 10 + 'px').show(300); 
});
$('#myText').blur(function() {
   $('#myTT').hide(300); 
});

Open in new window

#myTT {
 display: none;
 border: 1px solid #000;
 background-color: #baa; 
 padding: 10px;    
 width: 50%;
 position: relative;
 top: -20px;
 left: 240px;
}

Open in new window


I have a demo set up at http://jsfiddle.net/webdevem/fYwCQ/ - I added a simplified version of the code above so it'll remain in EE... the jsFiddle has a few more options to make it look a bit nicer.
0
 
CFbubuAuthor Commented:
Dear WebDevEM,

Your solution looks awesome to me! I have not tried it out yet, but I will do so and let you know if I am able to get to it work like how you did it :)

Thank you for being so kind and clear with your posted solution!
0
 
CFbubuAuthor Commented:
Updated:

I got it to work..:)
0
 
WebDevEMCommented:
In order for jQuery to work, it needs to be wrapped in a function that tells it to run (when the page is ready) so you'd need to do it like this - I've added a line above and below what you have.  The jsFiddle doesn't require those lines, because of their environment.
<SCRIPT TYPE="text/javascript">
$(document).ready(function() {

$('#myText').focus(function() {
    var tBoxPos = $(this).position();
    $('#myTT').css("top", tBoxPos.top + 'px').css("left", tBoxPos.left + $(this).innerWidth() + 8 + 'px').show(300);
});
$('#myText').blur(function() {
    $('#myTT').hide();
});


$('#myText2').focus(function() {
    var tBoxPos = $(this).position();
    $('#myTT2').css("top", tBoxPos.top + parseFloat($(this).css("margin-top")) + 'px').css("left", tBoxPos.left + $(this).innerWidth() + 8 + 'px').show("fold",500);
});
$('#myText2').blur(function() {
    $('#myTT2').hide();
});


});
</SCRIPT>

Open in new window

You also need to make sure jQuery itself is installed for either of my examples to work.  I have an article on my blog on how to install it.  (http://juntangled.blogspot.com/2012/07/installing-jquery.html)

If you use the "fold" option for my second example, you'd need to install jQuery UI as well.  (http://jqueryui.com/docs/Getting_Started)
0
 
CFbubuAuthor Commented:
Thank you for being so very clear with your working example!
0
 
CFbubuAuthor Commented:
nvm...now got that issue to work...lol
0
 
CFbubuAuthor Commented:
Oh..if you are still around...how can I use the same effect with a user hovering over a DIV tag?

Thanks again if you are still around. :)
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.

  • 7
  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now