Add missing text, default icon, update README.md

packages/tooltip/README.md

 # 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>` 

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>
         `;

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() {

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>
             
         `;

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==