Display tooltip/message while input is invalid HTML/JS/CSS/Angularjs

Question

I have an HTML input field where certain characters shouldn't be allowed. The functional part is solved, but I would like to display a tooltip/message next to the input field while it contains illegal characters.

I have a boolean which keeps track of this, but I've been unable to make a satisfactory tooltip/message.

I've tried tweaking uib-tooltip, but It requires the user to hover over the input area. I've tried making a span/div/label that's hidden/displayed based on the boolean, but my CSS skills aren't strong enough.

The app uses Angularjs and Bootstrap 3.

The input field is not part of a form.

Answer 1

where you catch that boolean just say to display the div next to input like

myDiv.visible = true;

Answer 2

Without knowing your exact Javascript, I can't really answer it directly.

I would do something like

function invalid() {
  if (invalid = true) {
    document.getElementById("alert").style.visibility = 'visible'
  }
}

make sure the error message is set to hidden,

then have the checker function run on focus..

<input type="text" onfocus="invalid()">

https://jsfiddle.net/we67geke/1/

Answer 3

This comment by user Lex solved the problem.

You can manually set the visibility of the uib-tooltip using the tooltip-is-open attribute. Simply use the same boolean you are using to keep track of the invalid characters.

Answer 4

As you mentioned

The app uses Angularjs and Bootstrap 3.

I suggest that you should use Boostrap tooltip. Use $('#element').tooltip('show') and $('#element').tooltip('hide') with your flag to handle status of Tooltip.

I don't know how your codes work, my idea seems like:

HTML:

<input type=text (keypress)="eventHandler()"> // angular >= 2

<input type=text ng-keypress="eventHandler()"> // angular 1

Angular code:

eventHandler() {
  if (isIllegal) {
    $('#element').tooltip('show');
  } else {
    $('#element').tooltip('hide');
  }
}

Something like that.

Bootstrap Tooltip: https://getbootstrap.com/docs/3.3/javascript/#tooltips