How can I make a background hint in focus?

Question

this is what i do.

<input data-tooltip data-width="350" class="has-tip tip-left" title="enter name" type="text" /> <script> $(document).foundation(); 

the tooltip works fine when hovering over an input, but I want to call it focus. please help?

Answer 1

 $(".has-tip").focus(function(){ $(this).foundation(); }); 

But make sure you can hide the tooltip. for this you can do it

 $(".has-tip").blur(function(){ //may be you can hide the tooltip or call the hide function if any. }); 

Note. Challenges may vary according to jquery version.

Answer 2

 Foundation.libs.tooltip.showTip( jQuery( ".has-tip" ) ); 

You might want to add #id to the range to make a more specific selector for the showTip function.

See: https://github.com/zurb/foundation/blob/master/js/foundation/foundation.tooltip.js

Answer 3

Demo

Try it.

 $('input').focus(function() { $('div').show(); }).focusout(function() { $('div').hide(); });