1.1.3 • Published 2 years ago
grapestip v1.1.3
grape-tips
Created with CodeSandbox
Provide a live demo of your plugin For a better user engagement create a simple live demo by using services like JSFiddle CodeSandbox CodePen and link it here in your README (attaching a screenshot/gif will also be a plus). To help you in this process here below you will find the necessary HTML/CSS/JS, so it just a matter of copy-pasting on some of those services. After that delete this part and update the link above
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="./src/index.js"></script>
</head>
<body>
<div id="gjs" style="height:100%; overflow:hidden">
</body>
</html>JS
import grapeTips from "grapestip";
window.onload = () => {
grapeTips("gjs", {});
};CSS
body,
html {
margin: 0;
height: 100%;
}Summary
Options
| Option | Description | Default |
|---|---|---|
id | 容器 id(必传) | default value |
callback | 接收导出 json 得方法 | default value |
Download
- CDN
https://unpkg.com/grapestip
- NPM
npm i grapestip
Usage
Directly in the browser
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script src="https://unpkg.com/grapestip"></script>
</head>
<style>
body,
html {
height: 100%;
margin: 0;
}
</style>
<body>
<div id="gjs" style="height:100%; overflow:hidden">
</body>
<script >
window.onload=()=>{
grapeTips.default('gjs',{})
}
</script>
</html>Modern javascript
import grapeTips from "grapestip";
window.onload = () => {
grapeTips("gjs", {});
};License
MIT