Skip to content

Commit 37b9268

Browse files
committed
initial commit
1 parent cdb9796 commit 37b9268

6 files changed

Lines changed: 183 additions & 2 deletions

File tree

‎README.md‎

Lines changed: 84 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,84 @@
1-
# smart-tooltip
2-
Tooltip Web Component
1+
[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/htmlelements/smart-tooltip)
2+
3+
# <smart-tooltip>
4+
5+
[Live Demo ↗](https://htmlelements.com/demos/tooltip/)
6+
|
7+
[Documentation ↗](https://www.htmlelements.com/docs/)
8+
|
9+
[Installation ↗](https://www.npmjs.com/package/@smarthtmlelements/smarthtmlelements-core)
10+
11+
[<smart-tooltip>](https://htmlelements.com/demos/tooltip/) is a Custom HTML Element providing slide show/banner rotator](https://htmlelements.com/).
12+
13+
<!--
14+
```
15+
<custom-element-demo>
16+
<template>
17+
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
18+
<script src="../smart-core/source/smart.core.js"></script>
19+
<link rel="stylesheet" href="../smart-core/source/styles/smart.default.css" type="text/css" />
20+
<script>
21+
window.onload = function () {
22+
23+
}
24+
</script>
25+
<next-code-block></next-code-block>
26+
</template>
27+
</custom-element-demo>
28+
```
29+
-->
30+
```html
31+
<smart-button id="button">Button</smart-button>
32+
<smart-tooltip id="tooltip" selector="button" arrow>This is a tooltip for smartButton</smart-tooltip>
33+
```
34+
35+
[<img src="https://raw.githubusercontent.com/htmlelements/smart-tooltip/master/tooltip-web-component.png" alt="Screenshot of smart-tooltip">](https://htmlelements.com/demos/tooltip)
36+
37+
## Getting Started
38+
39+
Smart HTML Elements components documentation includes getting started, customization and api documentation topics.
40+
41+
[Getting Started Documentation](https://www.htmlelements.com/docs/)
42+
43+
44+
## The file structure for Smart HTML Elements
45+
46+
- `source/`
47+
48+
Javascript files.
49+
50+
- `source/styles/`
51+
52+
Component CSS Files.
53+
54+
- `demos/`
55+
56+
Demo files
57+
58+
## Running demos in browser
59+
60+
1. Fork the `Smart-HTML-Elements-Core` repository and clone it locally.
61+
62+
1. Make sure you have [npm](https://www.npmjs.com/) installed.
63+
64+
1. When in the `Smart-HTML-Elements-Core` directory, run `npm install` and then `bower install` to install dependencies.
65+
66+
1. Run a localhost or upload the demo on a web server. Then run:
67+
68+
- /demos/smart-tooltip/smart-tooltip-overview.htm
69+
70+
71+
## Following the coding style
72+
73+
We are using [ESLint](http://eslint.org/) for linting JavaScript code.
74+
75+
## Creating a pull request
76+
77+
- Make sure your code is compliant with ESLint
78+
- [Submit a pull request](https://www.digitalocean.com/community/tutorials/how-to-create-a-pull-request-on-github) with detailed title and description
79+
- Wait for response from one of our team members
80+
81+
82+
## License
83+
84+
Apache License 2.0

‎bower.json‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
{
2+
"name": "smart-tooltip",
3+
"authors": [
4+
"jQWidgets Ltd"
5+
],
6+
"description": "Smart Tooltip is a free Tooltip Element, built using native Javascript and CSS.",
7+
"license": "Apache-2.0",
8+
"keywords": [
9+
"smart Tooltip",
10+
"Tooltip",
11+
"Tooltip Web Component",
12+
"Tooltip Custom Element"
13+
],
14+
"main": "",
15+
"ignore": [
16+
"**/.*",
17+
"**/node_modules",
18+
"**/bower_components",
19+
"**/tests"
20+
],
21+
"dependencies": {
22+
"webcomponentsjs": "^1.0.0",
23+
"smart-core": "HTMLElements/smart-core"
24+
}
25+
}

‎demos/smart-tooltip-overview.htm‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.0.22/webcomponents-lite.js"></script>
5+
6+
<link rel="stylesheet" href="../../smart-core/source/styles/smart.default.css" type="text/css" />
7+
<!--! do not remove -->
8+
<link rel="stylesheet" href="../styles/demos.css" type="text/css" />
9+
<script type="text/javascript" src="../../smart-core/source/smart.core.js"></script>
10+
<script>
11+
window.onload = function () {
12+
13+
}
14+
</script>
15+
</head>
16+
<body>
17+
<smart-button id="button">Button</smart-button>
18+
<smart-tooltip id="tooltip" selector="button" arrow>This is a tooltip for smartButton</smart-tooltip>
19+
</body>
20+
</html>

‎package.json‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
{
2+
"name": "@smarthtmlelements/smart-tooltip",
3+
"version": "2.0.0",
4+
"description": "Smart Tooltip",
5+
"scripts": {
6+
},
7+
"repository": {
8+
"type": "git",
9+
"url": "git+https://github.com/HTMLElements/smart-tooltip.git"
10+
},
11+
"author": "Smart HTML Elements",
12+
"license": "SEE LICENSE IN https://www.htmlelements.com/license/",
13+
"bugs": {
14+
"url": "https://github.com/HTMLElements/smart-tooltip"
15+
},
16+
"homepage": "https://github.com/HTMLElements/smart-tooltip#readme",
17+
"devDependencies": {
18+
19+
},
20+
"dependencies": {
21+
"@webcomponents/webcomponentsjs": "^1.0.22",
22+
"@smarthtmlelements/smart-core": "^2.0.0"
23+
},
24+
"main": "index.js",
25+
"directories": {},
26+
"keywords": [
27+
"custom",
28+
"element",
29+
"tooltip custom element",
30+
"html tooltip",
31+
"tooltip",
32+
"web components tooltip",
33+
"tooltip element",
34+
"banner rotator",
35+
"custom tooltip",
36+
"tooltip widget",
37+
"tooltip ui",
38+
"tooltip component",
39+
"tooltip control",
40+
"banner",
41+
"banner element",
42+
"banner user interface",
43+
"material banner",
44+
"material tooltip"
45+
]
46+
}

‎styles/demos.css‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
smart-carousel {
2+
width: 1000px;
3+
height: 450px;
4+
border-width: 0px;
5+
margin-left: auto;
6+
margin-right: auto;
7+
background-color: #d3d3d369;
8+
}

‎tooltip-web-component.png‎

1.69 KB
Loading

0 commit comments

Comments
 (0)