How can i make Foundation tooltip show on focus?

问题

this is what i am doing.

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

tooltip is working fine on hover to input but i want to call it on focus. please help?

回答1:

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

But make sure, you may want to hide the tooltip on focus out. for that you may do this

$(".has-tip").blur(function(){

//may be you can hide the tooltip or call the hide function if any.
});

Note, calling events may change according to the jquery version.

回答2:

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

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

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

回答3:

Demo

Try this..

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

来源：https://stackoverflow.com/questions/18462370/how-can-i-make-foundation-tooltip-show-on-focus