如何在焦点上制作基础工具提示？

Question

这就是我在做的事。

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

工具提示在悬停到输入时工作正常，但我想在焦点上调用它。 请帮忙？

Answer 1

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

但请确保，您可能希望隐藏焦点上的工具提示。为此你可以这样做

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

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

注意，调用事件可能会根据jquery版本而改变。

Answer 2

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

您可能希望在范围中添加#id，以便为showTip函数创建更具体的选择器。

请参阅：https://github.com/zurb/foundation/blob/master/js/foundation/foundation.tooltip.js

Answer 3

Demo

试试这个..

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