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

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

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

Show input title tooltip on click (not hover)

html

css

tooltip