CODEWITHSUNDEEP
htmlcsstooltip
JohnGIS
JohnGIS

Reputation: 423

Show input title tooltip on click (not hover)

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?

Upvotes: 1

Views: 3854

Answers (2)

Vic Segers
Vic Segers

Reputation: 197

Here is a solution without jQuery:

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

function removeTooltip() {
  document.getElementById("price").title = "";
}
<input type="number" id="price" value="1.80" onfocus="showTooltip()" onfocusout="removeTooltip()" />

Upvotes: 1

JohnGIS
JohnGIS

Reputation: 423

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

Upvotes: 0

Related Questions