Context Error

Display an Icon with a tooltip for error messages.

Usage

The error message can be displayed in two modes: auto and manual. In auto mode, the error message is displayed when the user hovers the icon. In manual mode, the help message is displayed when the you call the showDialog method.

This is a text with a <monster-context-error id="error">
    <div>This is an error message</div>
</monster-context-error> error message.
Hover the icon to see the tooltip.

The result of the above example:

The message can be set manually by calling the setErrorMessage(msg, show) method.

const error = document.getElementById('error');
error.setErrorMessage('This is an error message').showDialog();

// or

error.setErrorMessage('This is an error message', true);
// the message will be displayed immediately and will not be hidden

// or

error.setErrorMessage('This is an error message', 5000); 
// 5000 is the duration in ms, after which the message will be hidden

If you want to hide the message manually, you can call the resetErrorMessage method.

const error = document.getElementById('error');
error.resetErrorMessage();

To check if the message is currently displayed, you can call the hasErrorMessage method. This do not check if the message is visible, but if the message is set.

const error = document.getElementById('error');
error.hasErrorMessage(); // returns true or false

The control is derived from the popper component, so you can use all the attributes and methods of the popper component.

Internationalization

The error message can be translated into different languages. Therefore, the monster-context-error' component implements the implements the i18n transformer. For example, if you have the following error message: Failed to fetch`, you can add by adding the following code to your HTML file.

<script type="application/json" data-monster-role="translations">
{
  "Failed to fetch": "This is an error message"
}
</script>

Options