Question

我正在使用title属性显示数字输入字段的工具提示。效果很好，但是此代码仅供移动使用，因此，单击输入字段时，而不是将鼠标悬停在输入框上时，需要显示工具提示。

下面是一个将鼠标悬停在当前工具提示上的示例：

<input title ="This should only show when input is clicked" type="number" id="price" value=1.80>

是否可以在单击时而不是在悬停时显示标题工具提示？

Answer 1

这是没有jQuery的解决方案：

HTML

<input type="number" id="price" value="1.80" onfocus="showTooltip()" onfocusout="removeTooltip()" />

JavaScript

function showTooltip() {
    document.getElementById("price").title = "This should only show when input is clicked";
}

function removeTooltip() {
    document.getElementById("price").title = "";
}

Answer 2

我的解决方案是使用一个信息图标图像，并将其与一个名为jBox的很棒的库中的工具提示功能结合起来。

HTML

src="https://png.icons8.com/color/1600/info.png" class="myTooltip" title="I am a tooltip!" width="22px" height="auto">

JS

$(document).ready(function () {
    new jBox('Tooltip', {
      attach: '.myTooltip',
      trigger: 'click',  
      position: {    
          y: 'bottom'
          },  
      });
});

See this CodePen for a working demo

点击时显示输入标题工具提示（而不是悬停）

2 个答案: