jquery - 我怎样才能使基础工具提示显示在焦点上？

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

演示

试试这个..

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