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

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') 到 hide/show 工具提示。

演示代码 :

$(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>

Answer 2

我认为评估文本框是否为空会更好，因为这是触发工具提示效果的原因。

我写这段代码是为了向您展示我的意思：

function textboxChanged(element)
{
    let tooltip = document.getElementsByClassName("tooltiptext")[0];
    let visibleClass = 'visible';
    if(element?.value?.length === 0)
      tooltip?.classList.add(visibleClass);
    else
      tooltip?.classList.remove(visibleClass);      
}

/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;

  /* Position the tooltip text */
  position: absolute;
  z-index: 1;
  top: 0;
  left: 160px;
  margin-left: -60px;

  /* Fade in tooltip */
  opacity: 0;
  transition: opacity 0.3s;
}

/* Tooltip arrow */
.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 0%;
  left: 0%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext.visible {
  visibility: visible;
  opacity: 1;
}

<input type="text" placeholder="Write something, dude" onchange="textboxChanged(this)"/>
<button class="tooltip" >
  ¡Go search!
  <span class="tooltiptext visible">Hey! you missed something!</span>
</button>

由于您要使用 jQuery Tipso，我建议您创建一个变量来存储该框是否为空，然后在您的鼠标悬停功能上访问它。

注意：我从 https://www.w3schools.com/howto/howto_css_tooltip.asp

中获取了 CSS 作为工具提示

此致！

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

trigger tooltip on button based on search field value

javascript

css

jquery

tooltip