@dataloop-ai/components 0.18.0 → 0.18.2

package/src/demos/DlTooltipDemo.vue

@@ -54,11 +54,63 @@
                 />
             </dl-tooltip>
         </div>
+        <div>
+            Tooltip with chip
+            <dl-tooltip style="padding: 0; border-radius: 2px">
+                <DlChip
+                    label="Long Chip Label With Alot Of Text"
+                    max-width="75px"
+                />
+            </dl-tooltip>
+        </div>
+        <div>
+            Tooltip with chip and flex
+            <dl-tooltip>
+                <div style="display: flex; flex-flow: row wrap; gap: 3px">
+                    <DlChip
+                        label="Long Chip Label With Alot Of Text"
+                        max-width="75px"
+                    />
+                    <DlChip
+                        label="Long Chip Label With Alot Of Text"
+                        max-width="75px"
+                    />
+                    <DlChip
+                        label="Long Chip Label With Alot Of Text"
+                        max-width="75px"
+                    />
+                </div>
+            </dl-tooltip>
+        </div>
+        <div>
+            Styled Tooltip using styles
+            <dl-tooltip style="border: 1px solid red">
+                <div style="display: flex; flex-flow: row wrap; gap: 3px">
+                    i am with a border!
+                </div>
+            </dl-tooltip>
+        </div>
+        <div>
+            Styled Tooltip using a class
+            <dl-tooltip class="TestID">
+                <div style="display: flex; flex-flow: row wrap; gap: 3px">
+                    i am with a border!
+                </div>
+            </dl-tooltip>
+        </div>
+        <div>
+            Styled Tooltip using an id
+            <dl-tooltip id="TestID">
+                <div style="display: flex; flex-flow: row wrap; gap: 3px">
+                    i am with a border!
+                </div>
+            </dl-tooltip>
+        </div>
     </div>
 </template>
 
 <script lang="ts">
-import { DlTooltip, DlLink, DlCard } from '../components'
+import { DlTooltip, DlLink, DlCard, DlChip } from '../components'
 import { defineComponent } from 'vue-demi'
 
 export default defineComponent({
@@ -66,7 +118,8 @@ export default defineComponent({
     components: {
         DlCard,
         DlTooltip,
-        DlLink
+        DlLink,
+        DlChip
     },
     data() {
         return {
@@ -99,3 +152,14 @@ export default defineComponent({
     template: 'dl-tooltip-demo'
 })
 </script>
+
+<style>
+#TestID {
+    border: 1px solid red;
+    background-color: blue;
+}
+.TestID {
+    border: 1px solid red;
+    background-color: blue;
+}
+</style>