Show input title tooltip on click (not hover)

Question

I am using the title attribute to show a tooltip for a number input field. It works well, but this code is intended for mobile use so therefore the tooltip needs to show when the input field is clicked, rather than hovered over.

Here is an example of how the tooltip is currently displayed when hovered over:

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

Is it possible to display a title tooltip on click, rather than on hover?

Answer 1

Here is a solution without 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

My solution was to use an info icon image and combine it with the tooltip function from an awesome library called 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