jr-hint

This is a small web component that allows you to display custom messages when hovering HTML elements. The message can be displayed in a tooltip at the bottom of the screen or in the console. It has very minimal styling, so up to you to style it to your liking.

Demo

https://jonreason.github.io/jr-hint/demo/

Install

npm i jr-hint

Import

Client side only, no SSR.

###main.js (example1):

import { JrHint } from 'jr-hint'
customElements.define('jr-hint', JrHint);

depending on the setup, customElements.define() may need to be wrapped in useEffect (react) or onMounted (vue).

###App.vue (example2):

import {JrHint} from "jr-hint";

onMounted(function(){
    customElements.define("jr-hint", JrHint);
})

###demo/index.html (example3):

<script type="module">
    import '../jr-hint.js';
</script>

Usage

Use a tag, id or class of any HTML element as attribute and the message as value.

<button>OK</button>
<div id="square"></div>
<div class="circle"></div>
<div class="circle"></div>

<jr-hint
    button="This is a button."
    square="A square message. <br>Next line..."
    circle="A circular message."
></jr-hint>

Add attribute console to display messages in the console instead.

<jr-hint
    circle="A circular message."
    console
></jr-hint>

Add attribute fixed to keep the message window visible until closed via x-button.

<jr-hint
    circle="A circular message..."
    fixed
></jr-hint>

Styling example

jr-hint {
    color: magenta;
}