CODEWITHSUNDEEP
javascripthtmlcss
Arian
Arian

Reputation: 7719

Force input box tooltip/title to appear

First of all, I'm not using jQuery and I wonder if there's any way to FORCE an input box tooltip to appear. (I want to use this tooltip to tell user to enter another username and/or the password is not acceptable.)

function change(){
    if (document.getElementById('myTextField').value.length < 5){
        alert('show the tooltip in this case ');
    }
}
#myTextField{
    
}
<input type="text" id="myTextField"/>
<input type="submit" id="myButton" value="click me !" onclick="change()"/>

Upvotes: 0

Views: 930

Answers (1)

Francesco
Francesco

Reputation: 1413

As also mentioned by @Roope in the comment above, you can play with the data element and the CSS pseudo-elements.

The data elements are accessible by both: javascript and CSS. But in CSS (so far) you can only access it in the content property of the pseudo-elements ::after and ::before, that's enough to manage the tooltip (almost) only in CSS

P.S. the code is tested only on Chrome (the transition property could need prefix on other browsers)

function change(){
    document.getElementById('myTooltip').style.opacity = '1';
    if (document.getElementById('myTextField').value.length < 5){
        document.getElementById('myTooltip').setAttribute('data-tooltip', 'tooltip text');
    }
}

function keyPress(){
    document.getElementById('myTooltip').style.opacity = '0';
}
#myTooltip {
  position: relative;
  opacity: 0;
  transition: opacity .3s;
}

#myTooltip:before {
  position: absolute;
  top: 180%;
  width:160px;
  margin-bottom: 5px;
  margin-left: 5px;
  padding: 7px;
  background-color: #000;
  color: #fff;
  content: attr(data-tooltip);
  text-align: center;
  font-size: 14px;
  border-radius: 5px;
  line-height: 1.2;
}

#myTooltip:after {
  position: absolute;
  top: 155%;
  left: 85px;
  margin-left: -5px;
  width: 0;
  border-bottom: 5px solid #000;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  content: "";
  font-size: 0;
  line-height: 0;
}
<span id="myTooltip"></span>
<input type="text" id="myTextField" onkeyup="keyPress()"/>
<input type="submit" id="myButton" value="click me !" onclick="change()"/>

Upvotes: 1

Related Questions