wc-tooltip
A lightweight and developer-friendly tooltip web component.
Installation
You can install wc-tooltip with npm, or just get started quickly with CDN.
Install from npm
To install from npm, open terminal in your project folder and run:
npm install wc-tooltipAfter the package is installed, then you can import the tooltip web component into you code:
import "wc-tooltip";
window.onload = function () {
let tooltip = document.createElement("wc-tooltip");
const slotElement = document.querySelector("<CSS_SELECTOR>");
tooltip.setAttribute("alt", "Hello");
// Append the slot element to the tooptip
tooltip.append(slotElement);
};Install from CDN
There is jsDelivr CDN available for quickly integrated with your web page.
<!-- Latest version -->
<script src="https://cdn.jsdelivr.net/npm/@yishiashia/wc-tooltip"></script>
<!-- Specific version -->
<script src="https://cdn.jsdelivr.net/npm/@yishiashia/wc-tooltip@1.0.2"></script>Basic Usages:
<html>
<head>
<!-- Load wc-tooltip WebComponent library -->
<script src="https://cdn.jsdelivr.net/npm/@yishiashia/wc-tooltip@1.0.2"></script>
<!-- End Load -->
</head>
<body>
<!-- Using "wc-tooltip" html tag -->
<wc-tooltip alt="Hello World">
<img src="a.jpg" />
</wc-tooltip>
<!-- HTML tooltip content -->
<wc-tooltip>
<div slot="tooltip-html">
<h3>標題</h3>
<hr />
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<button>ok</button>
</div>
<img src="b.jpg" />
</wc-tooltip>
</body>
</html>Demo page
The demo page: https://yishiashia.github.io/wc-tooltip/
Usage
If you want to customize this web component, you can import the library and implement your new class by extend Tooltip.
import Tooltip from "wc-tooltip";
class customizedTooltip extends Tooltip {
// override here
}