javascript - 根据搜索字段值触发按钮上的工具提示

Question

只要搜索字段为空，我就想在按钮上显示工具提示。

我尝试过的:

// hover feature
const searchBtn = document.querySelector('.find__btn');

searchBtn.addEventListener('mouseover', () => {
  const searchText = document.querySelector('.find__field');
  console.log(searchText.value);
  if (searchText.value.length === 0) {
    jQuery(searchBtn).tipso({
      titleContent: 'Hello',
    });
  }
});

此实现的问题是它只能在第一次运行。我的意思是，如果我在搜索字段中写一些内容并将鼠标悬停在按钮上，工具提示将不可见，这就是我想要的。但问题是，如果我将搜索字段设为空并将鼠标悬停在按钮上，则工具提示不可见。

所以，它仅在第一次有效。我该如何修复它？

Answer 1

您可以在页面加载时初始化您的 tipso 插件。然后，您可以简单地根据条件使用 tipso('show') 或 tipso('hide') 来隐藏/显示工具提示。

演示代码:

$(function() {
  var searchBtn = jQuery('.find__btn');
  searchBtn.tipso({
    titleContent: 'Hello',
  });
  searchBtn.on("mouseover", function() {
    var searchText = $('.find__field').val();
    if (searchText.length === 0) {
      searchBtn.tipso('show'); //show 
    } else {
      searchBtn.tipso('hide'); //hide..
    }
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tipso/1.0.8/tipso.css" integrity="sha512-huSVDpZEo5Zb91YBqN03p+XP7b2S8m9nB/Pn2rbwOe0GF+jvPaFx06mexoH8lAmpa4+OEe1G4Wp3UGYcrY8V1g==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tipso/1.0.8/tipso.min.js" integrity="sha512-uffeXd+Tch3d7SWCkqqRg56IiDLYVnsXSJ22uDJ5DP1Nh55XphpL1BHL4c2NbpBrgmPjH4w9C9zgYQzwC8343w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<input type="text" class="find__field">
<button class="find__btn">Find..
</button>