jr-hint
v1.0.7
Published
Web component that displays custom messages when hovering HTML elements.
Downloads
14
Maintainers
Readme
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;
}