diff --git a/assets/controllers/tooltip_controller.js b/assets/controllers/tooltip_controller.js
index b7d9139..9658041 100644
--- a/assets/controllers/tooltip_controller.js
+++ b/assets/controllers/tooltip_controller.js
@@ -16,14 +16,17 @@ export default class extends Controller {
                 trigger: 'click',
                 allowHTML: true,
                 interactive: true,
+                appendTo: document.body,
             }
         } else {
             options = {
                 content: this.contentValue,
                 placement,
                 touch: false,
+                trigger: 'mouseenter focus',
                 allowHTML: true,
                 interactive: true,
+                appendTo: document.body,
             }
         }
         if (this.hasTriggerTarget) {
diff --git a/templates/forms.html.twig b/templates/forms.html.twig
index a03c3a6..f3a94d0 100644
--- a/templates/forms.html.twig
+++ b/templates/forms.html.twig
@@ -95,7 +95,7 @@
         {%- set tooltip = attr.tooltip -%}
         {%- set attr = attr|filter((v, k) => k != 'tooltip') -%}
     {%- endif -%}
-    <div{% if tooltip is not null %} {{ stimulus_controller('tooltip', { 'content': tooltip }) }}{% endif %}>
+    <div{% if tooltip is not null %} {{ stimulus_controller('tooltip', { 'content': tooltip }) }} tabindex="0"{% endif %}>
         <input type="radio" {{ block('widget_attributes') }}{% if value is defined %} value="{{ value }}"{% endif %}{% if checked %} checked="checked"{% endif %} />
     </div>
 {%- endblock radio_widget -%}
@@ -105,13 +105,13 @@
     {%- if form.vars.attr.tooltip is defined -%}
         {%- set tooltip = form.vars.attr.tooltip -%}
     {%- endif -%}
-    <div>
-        <label for="{{ form.vars.id }}" class="{{ html_classes('relative flex items-start', { 'cursor-not-allowed pointer-events-none': form.vars.attr.readonly is defined }) }}"{% if tooltip is not null %} {{ stimulus_controller('tooltip', { 'content': tooltip }) }}{% endif %}>
+    <div{% if tooltip is not null %} {{ stimulus_controller('tooltip', { 'content': tooltip }) }} tabindex="0"{% endif %}>
+        <label for="{{ form.vars.id }}" class="{{ html_classes('relative flex items-start', { 'cursor-not-allowed pointer-events-none': form.vars.attr.readonly is defined }) }}">
             <div class="flex h-6 items-center">
                 {{ form_widget(form) }}
             </div>
             <div class="{{ html_classes('ml-2 leading-6', { 'text-red-700': errors|length }) }}">
-                {{ form.vars.label | raw }}             
+                {{ form.vars.label | raw }}
                 {{- form_errors(form) -}}
             </div>
         </label>
@@ -126,8 +126,13 @@
     {%- if disabled is defined and disabled == true -%}
         {%- set attr = attr|merge({'class': attr.class|default('') ~ ' cursor-not-allowed' }) -%}
     {%- endif -%}
+    {%- set tooltip = null -%}
+    {%- if attr.tooltip is defined -%}
+        {%- set tooltip = attr.tooltip -%}
+        {%- set attr = attr|filter((v, k) => k != 'tooltip') -%}
+    {%- endif -%}
     {%- if attr.readonly is defined %}
-        <div class="cursor-not-allowed">
+        <div class="cursor-not-allowed"{% if tooltip is not null %} {{ stimulus_controller('tooltip', { 'content': tooltip }) }} tabindex="0"{% endif %}>
             {{ parent() }}
         </div>
     {% else %}