diff --git a/resources/js/components/DetailField.vue b/resources/js/components/DetailField.vue
index 03c7eb7..aadc8fb 100644
--- a/resources/js/components/DetailField.vue
+++ b/resources/js/components/DetailField.vue
@@ -1,7 +1,7 @@
 <template>
   <PanelItem :index="index" :field="field">
     <template #value>
-      <Excerpt :content="field.value" :plain-text="true" :should-show="field.shouldShow" class="o1-tooltip-detail" />
+      <Excerpt :content="field.content" :plain-text="true" :should-show="field.shouldShow" class="o1-tooltip-detail" />
     </template>
   </PanelItem>
 </template>
diff --git a/resources/js/components/FormField.vue b/resources/js/components/FormField.vue
index 678a31a..9cedd28 100644
--- a/resources/js/components/FormField.vue
+++ b/resources/js/components/FormField.vue
@@ -1,6 +1,8 @@
 <template>
   <DefaultField :field="field" :errors="errors" :show-help-text="showHelpText">
-    <template #field> </template>
+    <template #field>
+      <Excerpt :content="field.content" :plain-text="true" :should-show="field.shouldShow" class="o1-tooltip-detail" />
+    </template>
   </DefaultField>
 </template>
 
diff --git a/resources/js/components/Tooltip.vue b/resources/js/components/Tooltip.vue
index 797c9f9..6045c17 100644
--- a/resources/js/components/Tooltip.vue
+++ b/resources/js/components/Tooltip.vue
@@ -1,17 +1,22 @@
 <template>
-  <VueTippy class="o1-cursor-pointer o1-items-center o1-flex o1-justify-center o1-text-90 hover:o1-text-primary">
+  <Tippy
+    :content="field.content"
+    :allowHTML="field.allowHtml"
+    class="o1-cursor-pointer o1-items-center o1-flex o1-justify-center o1-text-90 hover:o1-text-primary"
+  >
     <span class="o1-mr-2" v-if="field.text && field.iconPosition === 'right'">{{ field.text }}</span>
     <img v-if="field.iconUrl" :width="field.size || 25" :src="field.iconUrl" />
     <span class="o1-inline-flex o1-text-70" v-if="field.iconPath" v-html="field.iconPath"></span>
     <span class="o1-ml-2" v-if="field.text && field.iconPosition === 'left'">{{ field.text }}</span>
-  </VueTippy>
+  </Tippy>
 </template>
 
 <script>
-import VueTippy from 'vue-tippy';
+import { Tippy } from 'vue-tippy';
+import 'tippy.js/dist/tippy.css';
 
 export default {
   props: ['field'],
-  components: { VueTippy },
+  components: { Tippy },
 };
 </script>
diff --git a/src/Tooltip.php b/src/Tooltip.php
index 11b054c..6a70646 100644
--- a/src/Tooltip.php
+++ b/src/Tooltip.php
@@ -50,9 +50,9 @@ public function placement($placement)
         return $this->withMeta(['placement' => $placement]);
     }
 
-    public function tippyOptions($tippyOptions)
+    public function allowTooltipHTML($allowHtml = true)
     {
-        return $this->withMeta(['tippyOptions' => $tippyOptions]);
+        return $this->withMeta(['allowHtml' => $allowHtml]);
     }
 
     public function resolve($resource, $attribute = null)