diff --git a/packages/tooltip/assets/favicon.ico b/packages/tooltip/assets/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..f6cf22d1afc22f071d2b64c7779bc5214c3adae5
Binary files /dev/null and b/packages/tooltip/assets/favicon.ico differ
diff --git a/packages/tooltip/assets/index.html.ejs b/packages/tooltip/assets/index.html.ejs
index d6d81fb623ae039e789bc1976d1b76f9914ce38d..e91e6887c4fccec625cc5a5cccc1b6eefec09b16 100644
--- a/packages/tooltip/assets/index.html.ejs
+++ b/packages/tooltip/assets/index.html.ejs
@@ -3,6 +3,7 @@
<head>
<meta charset="UTF-8">
<script type="module" src="dbp-tooltip-demo.js"></script>
+ <style src="tippy.css"></style>
</head>
<body>
diff --git a/packages/tooltip/rollup.config.js b/packages/tooltip/rollup.config.js
index 0fbc7fbf6a8053c3d195c3776b7ac345cc1108cc..b0d23052d642532524af9a4c112e3370f31fb418 100644
--- a/packages/tooltip/rollup.config.js
+++ b/packages/tooltip/rollup.config.js
@@ -74,6 +74,7 @@ export default (async () => {
limit: 0,
include: [
await getPackagePath('select2', '**/*.css'),
+ await getPackagePath('tippy.js', '**/*.css'),
],
emitFiles: true,
fileName: 'shared/[name].[hash][extname]'
diff --git a/packages/tooltip/src/dbp-tooltip-demo.js b/packages/tooltip/src/dbp-tooltip-demo.js
index 7e294b0a68d1f051ba46eb860b6f947bb54c19eb..a4d7e1e25ce3da5d5abf93aa39b0784e1de7057c 100644
--- a/packages/tooltip/src/dbp-tooltip-demo.js
+++ b/packages/tooltip/src/dbp-tooltip-demo.js
@@ -5,6 +5,7 @@ import * as commonUtils from '@dbp-toolkit/common/utils';
import * as commonStyles from '@dbp-toolkit/common/styles';
import {TooltipElement} from './tooltip';
import DBPLitElement from "@dbp-toolkit/common/dbp-lit-element";
+import tippy2CSSPath from 'tippy.js/dist/tippy.css';
export class TooltipDemo extends ScopedElementsMixin(DBPLitElement) {
@@ -52,13 +53,18 @@ export class TooltipDemo extends ScopedElementsMixin(DBPLitElement) {
render() {
+ const tippy2CSS = commonUtils.getAssetURL(tippy2CSSPath);
+
return html`
+
+ <link rel="stylesheet" href="${tippy2CSS}">
+
<section class="section">
<div class="container">
<h1 class="title">Tooltip-Demo</h1>
</div>
<div class="container">
- <dbp-tooltip></dbp-tooltip>
+ <dbp-tooltip text-content="tippy tooltip demo text"></dbp-tooltip>
</div>
</section>
`;
diff --git a/packages/tooltip/src/tooltip.js b/packages/tooltip/src/tooltip.js
index 37cd03589041e00a273a49a605d9ff46d7cfe24d..8bfa72cb977d772b4a242a6fec1dd50c73bbdc5b 100644
--- a/packages/tooltip/src/tooltip.js
+++ b/packages/tooltip/src/tooltip.js
@@ -1,32 +1,70 @@
+import {css, html} from 'lit-element';
+import {ScopedElementsMixin} from '@open-wc/scoped-elements';
+import * as commonUtils from '@dbp-toolkit/common/utils';
+import * as commonStyles from '@dbp-toolkit/common/styles';
import DBPLitElement from '@dbp-toolkit/common/dbp-lit-element';
import tippy from 'tippy.js';
-//import 'tippy.js/dist/tippy.css';
-console.dir(tippy);
+import {Icon} from '@dbp-toolkit/common';
+import tippy2CSSPath from 'tippy.js/dist/tippy.css';
-export class TooltipElement extends DBPLitElement {
+export class TooltipElement extends ScopedElementsMixin(DBPLitElement) {
constructor() {
super();
- this.gitInfo = '';
+ this.tippy = '';
+ this.textContent = '';
}
+ static get scopedElements() {
+ return {
+ 'dbp-icon': Icon,
+ };
+ }
static get properties() {
return {
...super.properties,
- gitInfo: { type: String, attribute: 'git-info' },
+ tippy: { type: Object, attribute: false },
+ textContent: { type: String, attribute: 'text-content' },
};
}
+ firstUpdated() {
+
+ tippy(this._('#tooltip-icon'), {
+ content: this.textContent,
+ });
+ }
+
+ static get styles() {
+ // language=css
+ return css`
+ ${commonStyles.getThemeCSS()}
+ ${commonStyles.getGeneralCSS(false)}
+ ${commonStyles.getButtonCSS()}
+
+ .info-icon {
+ color: red;
+ padding: 0px 4px;
+ }
+
+ `;
+ }
+
render() {
- // tippy('#myButton', {
- // content: "I'm a Tippy tooltip!",
- // });
+
+ const tippy2CSS = commonUtils.getAssetURL(tippy2CSSPath);
+
+ if (this._('#tooltip-icon')) {
+ this.tippy = tippy(this._('#tooltip-icon'), { content: this.textContent });
+ }
return html`
- <div>
- <button id="myButton">My Button</button>
- </div>
+ <link rel="stylesheet" href="${tippy2CSS}">
+ <div>
+ <dbp-icon name='information' class="info-icon" id="tooltip-icon"></dbp-icon>
+ </div>
+
`;
}
diff --git a/packages/tooltip/test/unit.js b/packages/tooltip/test/unit.js
new file mode 100644
index 0000000000000000000000000000000000000000..007cddaac9d48ccb68aa0230433cc3e46af9ae57
--- /dev/null
+++ b/packages/tooltip/test/unit.js
@@ -0,0 +1,21 @@
+import {assert} from '@esm-bundle/chai';
+import '../src/dbp-tooltip';
+
+suite('dbp-tooltip', () => {
+ let node;
+
+ setup(async () => {
+ node = document.createElement('dbp-tooltip');
+ document.body.appendChild(node);
+ await node.updateComplete;
+ });
+
+ teardown(() => {
+ node.remove();
+ });
+
+ test('should render', () => {
+ assert.isNotNull(node.shadowRoot);
+ });
+ });
+