diff --git a/packages/tooltip/README.md b/packages/tooltip/README.md
index 3d7b5ee4db7fc625c8ff96072448569c28a0386d..276b55c54f578bc94487d072dc716811eb776ccd 100644
--- a/packages/tooltip/README.md
+++ b/packages/tooltip/README.md
@@ -1,5 +1,11 @@
# Tooltip Web Component
+The tooltip component provides an icon as an anker for a tooltip.
+There is a generic tooltip `<dbp-tooltip>` which supports any icon the app has bundled.
+Another info tooltip `<dbp-info-tooltip>` shows an embedded info icon (small letter i inside a circle) as a convenient
+shortcut.
+
+## Install
You can install this component via npm:
```bash
@@ -9,16 +15,20 @@ npm i @dbp-toolkit/tooltip
## Usage
```html
-<dbp-tooltip></dbp-tooltip>
+<dbp-tooltip text-content="text to show" icon-name="information"></dbp-tooltip>
+<dbp-info-tooltip text-content="text to show"></dbp-info-tooltip>
<script type="module" src="node_modules/@dbp-toolkit/tooltip/dist/dbp-tooltip.js"></script>
```
Or directly via CDN:
```html
-<dbp-tooltip></dbp-tooltip>
+<dbp-tooltip text-content="text to show" icon-name="information"></dbp-tooltip>
+<dbp-info-tooltip text-content="text to show"></dbp-info-tooltip>
<script type="module" src="https://unpkg.com/@dbp-toolkit/tooltip@0.0.1/dist/dbp-tooltip.js"></script>
```
## Attributes
+- `text-content`: Text to show as tooltip (default is 'text missing.' as a reminder!)
+- `icon-name`: (`<dbp-tooltip>` only, default is a skull) Name of the bundled icon (SVG) for `<dbp-icon>`
diff --git a/packages/tooltip/src/dbp-tooltip-demo.js b/packages/tooltip/src/dbp-tooltip-demo.js
index 3cf80208f9116bd78d32f887f2c426db615d1cb5..3920d992af5bfea3e4a0d5c39e0032e285222c29 100644
--- a/packages/tooltip/src/dbp-tooltip-demo.js
+++ b/packages/tooltip/src/dbp-tooltip-demo.js
@@ -67,6 +67,10 @@ export class TooltipDemo extends ScopedElementsMixin(DBPLitElement) {
<p>Mind the gap!
<dbp-tooltip text-content="tippy tooltip demo text" icon-name="information"></dbp-tooltip>
</p>
+
+ <p>Missing text, default icon:
+ <dbp-tooltip></dbp-tooltip>
+ </p>
</div>
</section>
`;
diff --git a/packages/tooltip/src/info-tooltip.js b/packages/tooltip/src/info-tooltip.js
index 3af0473bb52b6c10277be96b0daf9701b5ae133f..bc0a00ca494c0cc1c3a7e4738d11f01ed757b280 100644
--- a/packages/tooltip/src/info-tooltip.js
+++ b/packages/tooltip/src/info-tooltip.js
@@ -11,7 +11,7 @@ export class InfoTooltip extends ScopedElementsMixin(DBPLitElement) {
constructor() {
super();
this.tippy = '';
- this.textContent = '';
+ this.textContent = 'missing text.';
}
static get properties() {
diff --git a/packages/tooltip/src/tooltip.js b/packages/tooltip/src/tooltip.js
index 851d58d0ab448909ac0231c224bc12dc5e7c0793..30363e004ccaf185697fbdfa500b5347d4ebd3f0 100644
--- a/packages/tooltip/src/tooltip.js
+++ b/packages/tooltip/src/tooltip.js
@@ -12,7 +12,7 @@ export class TooltipElement extends ScopedElementsMixin(DBPLitElement) {
constructor() {
super();
this.tippy = '';
- this.textContent = '';
+ this.textContent = 'missing text.';
this.iconName = '';
}
@@ -66,8 +66,23 @@ export class TooltipElement extends ScopedElementsMixin(DBPLitElement) {
return html`
<link rel="stylesheet" href="${tippy2CSS}">
<div class="tooltip-icon">
- <!-- https://icons.getbootstrap.com/icons/info-circle/ -->
- <dbp-icon name="${this.iconName}" id="tooltip-icon"></dbp-icon>
+ ${ this.iconName ?
+ html`<dbp-icon name="${this.iconName}" id="tooltip-icon"></dbp-icon>`
+
+ : html`<!-- https://www.svgrepo.com/svg/89416/skull -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
+ id="tooltip-icon" x="0" y="0" viewBox="0 0 360 360" xml:space="preserve">
+ <g>
+ <path d="M180,0C97.157,0,30,67.157,30,150v109.667h0.016c0.337,13.559,7.045,22.475,19.879,26.753L105,305v30
+c0,13.75,11.25,25,25,25h100c13.75,0,25-11.25,25-25v-30l55.051-18.668c12.834-4.278,19.597-13.106,19.934-26.665H330V150
+C330,67.157,262.843,0,180,0z M300,258.063l-54.635,18.526L225,283.495V305v25h-90v-25v-21.544l-20.415-6.884L60,258.168V150
+c0-32.053,12.482-62.188,35.147-84.853C117.813,42.482,147.947,30,180,30s62.188,12.482,84.853,35.147
+C287.518,87.813,300,117.947,300,150V258.063z"/>
+ <path d="M160,281c0,11.046,8.954,20,20,20s20-8.954,20-20s-20-40-20-40S160,269.954,160,281z"/>
+ <path d="M125,161c-24.854,0-45,20.146-45,45s20.146,45,45,45s45-20.146,45-45S149.854,161,125,161z M125,221c-8.271,0-15-6.729-15-15s6.729-15,15-15s15,6.729,15,15S133.271,221,125,221z"/>
+ <path d="M190,206c0,24.854,20.146,45,45,45s45-20.146,45-45s-20.147-45-45-45S190,181.146,190,206z M250,206c0,8.271-6.729,15-15,15s-15-6.729-15-15s6.729-15,15-15S250,197.729,250,206z"/>
+ </g>
+</svg>` }
</div>
`;
diff --git a/yarn.lock b/yarn.lock
index d997016bd9ea7fbbc03ddd901ef24be4aa460774..63b38c95e0b6e8454134d24c8a1d01b3712303ad 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7232,7 +7232,7 @@ rollup-plugin-md@^1.0.0:
rollup "^2.35.1"
rollup-pluginutils "^2.8.2"
-rollup-plugin-replace@^3.0.0:
+rollup-plugin-replace@^2.2.0:
version "2.2.0"
resolved "https://registry.yarnpkg.com/rollup-plugin-replace/-/rollup-plugin-replace-2.2.0.tgz#f41ae5372e11e7a217cde349c8b5d5fd115e70e3"
integrity sha512-/5bxtUPkDHyBJAKketb4NfaeZjL5yLZdeUihSfbF2PQMz+rSTEb8ARKoOl3UBT4m7/X+QOXJo3sLTcq+yMMYTA==