diff --git a/packages/dialog/README.md b/packages/dialog/README.md
index aa2abb950..8b3e1e9d2 100644
--- a/packages/dialog/README.md
+++ b/packages/dialog/README.md
@@ -28,10 +28,10 @@ import '@lion/dialog/lion-dialog.js';
 
 ```js
 html`
-  <lion-dialog>
-    <div slot="content" class="tooltip" .config=${{
-      viewportConfig: { placement: 'bottom-right' },
-    }}>
+  <lion-dialog.config=${{
+    viewportConfig: { placement: 'bottom-right' },
+  }}>
+    <div slot="content">
       This is a dialog
       <button
         @click=${e => e.target.dispatchEvent(new Event('dialog-close', { bubbles: true }))}
diff --git a/packages/overlays/README.md b/packages/overlays/README.md
index ca2e90ecc..86b3a0f8e 100644
--- a/packages/overlays/README.md
+++ b/packages/overlays/README.md
@@ -37,11 +37,11 @@ npm i --save @lion/overlays
 import '@lion/overlays/lion-overlay.js';
 
 html`
-  <lion-overlay>
-    <div slot="content" class="tooltip" .config=${{
-      placementMode: global,
-      viewportConfig: { placement: 'bottom-right' },
-    }}>
+  <lion-overlay.config=${{
+    placementMode: 'global',
+    viewportConfig: { placement: 'bottom-right' },
+  }}>
+    <div slot="content">
       This is an overlay
       <button
         @click=${e => e.target.dispatchEvent(new Event('overlay-close', { bubbles: true }))}
diff --git a/packages/overlays/stories/index.stories.js b/packages/overlays/stories/index.stories.js
index 60c060dba..4331b4b96 100644
--- a/packages/overlays/stories/index.stories.js
+++ b/packages/overlays/stories/index.stories.js
@@ -364,6 +364,8 @@ storiesOf('Overlay System | Overlay as a WC', module)
       <style>
         ${overlayDemoStyle}
       </style>
+      <p>Open the overlay on a big screen and it will be a dialog</p>
+      <p>Close and open it again on a small screen (< 600px) and it will be a bottom sheet</p>
       <lion-demo-overlay
         .config=${{ ...withBottomSheetConfig() }}
         @before-show=${e => {
@@ -420,7 +422,7 @@ storiesOf('Overlay System | Overlay as a WC', module)
         ${overlayDemoStyle}
       </style>
       <div class="demo-box_placements">
-        In the beautiful ${popup} the weather is nice.
+        <p>In the beautiful ${popup} the weather is nice.</p>
       </div>
     `;
   })
@@ -440,6 +442,7 @@ storiesOf('Overlay System | Overlay as a WC', module)
           slot="invoker"
           id="input"
           type="text"
+          autocomplete="off"
           @click=${e => e.stopImmediatePropagation()}
           @focusout=${() => {
             popup.opened = false;
diff --git a/packages/tooltip/README.md b/packages/tooltip/README.md
index c42b725f7..f0df33307 100644
--- a/packages/tooltip/README.md
+++ b/packages/tooltip/README.md
@@ -28,7 +28,7 @@ import '@lion/tooltip/lion-tooltip.js';
 
 ```html
 <lion-tooltip>
-  <div slot="content" class="tooltip">This is a tooltip<div>
+  <div slot="content">This is a tooltip<div>
   <a slot="invoker" href="https://www.google.com/">
     Popup on link
   </a>
diff --git a/packages/tooltip/stories/index.stories.js b/packages/tooltip/stories/index.stories.js
index 728809d64..67662aef0 100644
--- a/packages/tooltip/stories/index.stories.js
+++ b/packages/tooltip/stories/index.stories.js
@@ -32,7 +32,7 @@ const tooltipDemoStyle = css`
     flex-direction: column;
   }
 
-  .tooltip {
+  .demo-tooltip {
     display: block;
     position: absolute;
     font-size: 16px;
@@ -41,12 +41,6 @@ const tooltipDemoStyle = css`
     border-radius: 4px;
     padding: 8px;
   }
-
-  @media (max-width: 480px) {
-    .tooltip {
-      display: none;
-    }
-  }
 `;
 
 storiesOf('Overlays Specific WC|Tooltip', module)
@@ -60,7 +54,7 @@ storiesOf('Overlays Specific WC|Tooltip', module)
       <div class="demo-box">
         <lion-tooltip .config=${{ popperConfig: { placement: 'right' } }}>
           <lion-button slot="invoker">Tooltip</lion-button>
-          <div slot="content" class="tooltip">Hello there!</div>
+          <div slot="content" class="demo-tooltip">Hello there!</div>
         </lion-tooltip>
       </div>
     `,
@@ -74,19 +68,19 @@ storiesOf('Overlays Specific WC|Tooltip', module)
       <div class="demo-box_placements">
         <lion-tooltip .config=${{ popperConfig: { placement: 'top' } }}>
           <lion-button slot="invoker">Top</lion-button>
-          <div slot="content" class="tooltip">Its top placement</div>
+          <div slot="content" class="demo-tooltip">Its top placement</div>
         </lion-tooltip>
         <lion-tooltip .config=${{ popperConfig: { placement: 'right' } }}>
           <lion-button slot="invoker">Right</lion-button>
-          <div slot="content" class="tooltip">Its right placement</div>
+          <div slot="content" class="demo-tooltip">Its right placement</div>
         </lion-tooltip>
         <lion-tooltip .config=${{ popperConfig: { placement: 'bottom' } }}>
           <lion-button slot="invoker">Bottom</lion-button>
-          <div slot="content" class="tooltip">Its bottom placement</div>
+          <div slot="content" class="demo-tooltip">Its bottom placement</div>
         </lion-tooltip>
         <lion-tooltip .config=${{ popperConfig: { placement: 'left' } }}>
           <lion-button slot="invoker">Left</lion-button>
-          <div slot="content" class="tooltip">Its left placement</div>
+          <div slot="content" class="demo-tooltip">Its left placement</div>
         </lion-tooltip>
       </div>
     `,
@@ -126,7 +120,7 @@ storiesOf('Overlays Specific WC|Tooltip', module)
           }}"
         >
           <lion-button slot="invoker">${text('Invoker text', 'Hover me!')}</lion-button>
-          <div slot="content" class="tooltip">${text('Content text', 'Hello, World!')}</div>
+          <div slot="content" class="demo-tooltip">${text('Content text', 'Hello, World!')}</div>
         </lion-tooltip>
       </div>
     `,