Floating: remove props; class, maxWidth. remove padding on floating-content.

Author: shimizukawa

src/components/Floating.vue

@@ -9,7 +9,9 @@
 //     </button>
 //   </template>
 //   <template #content>
-//     My Long Long Long Long Long Long Long Long Long Long Tooltip
+//     <div style="max-width: 300px;">
+//       My Long Long Long Long Long Long Long Long Long Long Tooltip
+//     </div>
 //   </template>
 // </Floating>
 //
@@ -19,8 +21,6 @@
 // - interactive: keeping the tooltip open when the user hovers over the tooltip, default false
 // - delay: [delayEnter, delayLeave] for hover, default 0 (means [0, 0])
 // - arrow: boolean, default true
-// - class: string as css class, default undefined.
-// - maxWidth: string as css width, default undefined.
 // - theme: string as data-theme, default 'light'.
 // - trigger: boolean to control the tooltip visibility.
 // - onShow: () => void, callback when the tooltip is shown.
@@ -55,8 +55,6 @@ type Props = {
   interactive?: boolean;
   delay?: number | [number, number];
   arrow?: boolean;
-  class?: string;
-  maxWidth?: number;
   theme?: string;
   trigger?: boolean;
   onShow?: OnShowFn;
@@ -79,8 +77,6 @@ const {
   interactive,
   delay,
   arrow: arrowProp,
-  class: classProp,
-  maxWidth: maxWidthProp,
   theme: themeProp,
   trigger: triggerRef,
 } = toRefs(props);
@@ -160,28 +156,20 @@ const arrowStyles = computed(() => {
     bottom: "",
   };
 });
-
-const customFloatingStyles = computed(() => {
-  return {
-    ...floatingStyles.value,
-    maxWidth: `${maxWidthProp.value}px`,
-  };
-});
 </script>
 
 <template>
   <span ref="targetRef">
     <slot />
   </span>
-  <Teleport to="body">
+  <Teleport v-if="slots.content" to="body">
     <div
       v-if="isTriggered"
       ref="floatingRef"
       class="floating-wrapper"
-      :class="classProp"
       :data-theme="themeProp"
       :data-placement="placed0"
-      :style="customFloatingStyles"
+      :style="floatingStyles"
     >
       <div class="floating-content" :data-theme="themeProp">
         <slot name="content" />
@@ -206,11 +194,12 @@ const customFloatingStyles = computed(() => {
   background-color: white;
   border: 1px solid black;
   border-radius: 3px;
-  padding: 7px;
   z-index: 10000;
 
   .floating-content {
     display: grid;
+    background-color: white;
+    z-index: 10002;
   }
 
   .floating-arrow {
@@ -221,13 +210,18 @@ const customFloatingStyles = computed(() => {
     height: 8px;
     transform: rotate(45deg);
     box-sizing: border-box;
+    z-index: 10001;
   }
 }
 
 .floating-wrapper[data-theme~="light"] {
   background-color: white;
   border: 1px solid black;
 
+  .floating-content {
+    background-color: white;
+  }
+
   .floating-arrow {
     background-color: white;
     border: 0px solid black;

src/components/MarkdownRendererBlockLink.vue

@@ -84,7 +84,9 @@ const parseMetadata = (html: string) => {
             </a>
           </template>
           <template #content>
-            <iframe v-if="url" :src="url" class="small" />
+            <div class="floating-iframe">
+              <iframe v-if="url" :src="url" class="small" />
+            </div>
           </template>
         </Floating>
       </div>
@@ -124,6 +126,7 @@ iframe.small {
   transform-origin: top left;
   width: 167%; /* = 1.0/0.6 */
   height: 162%;
+  border: 0;
 }
 .image {
   justify-content: right;
@@ -132,4 +135,9 @@ iframe.small {
 .image img {
   max-width: 200px;
 }
+.floating-iframe {
+  overflow: hidden;
+  padding: 2px;
+  box-sizing: border-box;
+}
 </style>

src/components/Preview.vue

@@ -39,8 +39,6 @@ const render = (text: string) => $md.render(text);
         <span class="hover-box">
           <Floating
             placement="top-start"
-            :max-width="500"
-            class="large-font"
             theme="warning"
             :delay="200"
           >
@@ -50,7 +48,9 @@ const render = (text: string) => $md.render(text);
               </button>
             </template>
             <template #content>
-              Virtual DOM is a programming concept where an ideal, or "virtual", representation of a UI is kept in memory and synced with the "real" DOM by a library such as React. This process is called reconciliation.
+              <div class="hint">
+                Virtual DOM is a programming concept where an ideal, or "virtual", representation of a UI is kept in memory and synced with the "real" DOM by a library such as React. This process is called reconciliation.
+              </div>
             </template>
           </Floating>
         </span>
@@ -98,8 +98,10 @@ code {
   display: none;
 }
 
-.large-font {
+.hint {
   font-size: 1.5em;
+  max-width: 400px;
+  padding: 6px;
 }
 
 .hover-anchor {
@@ -119,6 +121,9 @@ code {
   background-color: yellow;
   color: red;
   border-color: red;
+  .floating-content {
+    background-color: yellow;
+  }
   .floating-arrow {
     background-color: yellow;
     border-color: red;