单击显示输入标题工具提示（不悬停）

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