no touch tooltips on nav elements

app/javascript/application.scss

@@ -114,6 +114,13 @@ button[disabled] .enabled, button.btn-disabled .enabled {
   bottom: auto;
 }
 
+@media (hover: none), (pointer: coarse) {
+  .tooltip-no-touch:before,
+  .tooltip-no-touch:after {
+    display: none;
+  }
+}
+
 .autocomplete {
   background: white;
   z-index: 1000;

app/views/accounts/show.html.erb

@@ -147,7 +147,7 @@
                   <%= f.check_box :value, class: 'toggle', checked: account_config.value != false %>
                 </submit-form>
               <% else %>
-                <a href="<%= console_redirect_index_path(redir: "#{Docuseal::CONSOLE_URL}/plans") %>" data-turbo="false" data-tip="<%= I18n.t('unlock_with_docuseal_pro') %>" data-on="change" class="flex tooltip">
+                <a href="<%= console_redirect_index_path(redir: "#{Docuseal::CONSOLE_URL}/plans") %>" data-turbo="false" data-tip="<%= I18n.t('unlock_with_docuseal_pro') %>" data-on="change" class="flex tooltip tooltip-no-touch">
                   <%= f.check_box :value, class: 'toggle pointer-events-none', checked: account_config.value != false, disabled: true %>
                 </a>
               <% end %>
@@ -170,7 +170,7 @@
                   <%= f.check_box :value, class: 'toggle', checked: account_config.value == true %>
                 </submit-form>
               <% else %>
-                <a href="<%= console_redirect_index_path(redir: "#{Docuseal::CONSOLE_URL}/plans") %>" data-turbo="false" data-tip="<%= I18n.t('unlock_with_docuseal_pro') %>" class="flex tooltip">
+                <a href="<%= console_redirect_index_path(redir: "#{Docuseal::CONSOLE_URL}/plans") %>" data-turbo="false" data-tip="<%= I18n.t('unlock_with_docuseal_pro') %>" class="flex tooltip tooltip-no-touch">
                   <%= f.check_box :value, class: 'toggle pointer-events-none', checked: account_config.value == true, disabled: true %>
                 </a>
               <% end %>

app/views/dashboard/_toggle_view.html.erb

@@ -1,10 +1,10 @@
 <form action="<%= root_path %>" method="get" id="templates_submissions_toggle" class="bg-base-200 px-1.5 rounded-xl py-1 whitespace-nowrap">
-  <toggle-cookies data-value="templates" data-key="dashboard_view" class="sm:tooltip tooltip-top" data-tip="<%= t('templates') %>">
+  <toggle-cookies data-value="templates" data-key="dashboard_view" class="sm:tooltip tooltip-top tooltip-no-touch" data-tip="<%= t('templates') %>">
     <button class="<%= local_assigns[:selected] == 'submissions' ? 'btn !border !rounded-lg btn-square !p-0 !btn-sm !h-8 !w-9' : 'btn btn-neutral !rounded-lg btn-square !p-0 hover:text-neutral-300 !btn-sm !h-8 !w-9 disabled:btn-neutral' %>">
       <%= svg_icon('layout_grid', class: 'w-6 h-6 stroke-2') %>
     </button>
   </toggle-cookies>
-  <toggle-cookies data-value="submissions" data-key="dashboard_view" class="sm:tooltip tooltip-top" data-tip="<%= t('submissions') %>">
+  <toggle-cookies data-value="submissions" data-key="dashboard_view" class="sm:tooltip tooltip-top tooltip-no-touch" data-tip="<%= t('submissions') %>">
     <button class="<%= local_assigns[:selected] == 'submissions' ? 'btn btn-neutral !rounded-lg btn-square !p-0 hover:text-neutral-300 !btn-sm !h-8 !w-9' : 'btn !border !rounded-lg btn-square !p-0 !btn-sm !h-8 !w-9 disabled:btn-neutral' %>">
       <%= svg_icon('layout_list', class: 'w-6 h-6 stroke-2') %>
     </button>

app/views/shared/_github.html.erb

@@ -1,4 +1,4 @@
-<a target="_blank" href="<%= Docuseal::GITHUB_URL %>" rel="noopener noreferrer nofollow" class="relative flex items-center rounded-full px-2 py-0.5 text-xs leading-4 mt-1 text-base-content border border-base-300 tooltip tooltip-bottom" data-tip="Give a star on GitHub">
+<a target="_blank" href="<%= Docuseal::GITHUB_URL %>" rel="noopener noreferrer nofollow" class="relative flex items-center rounded-full px-2 py-0.5 text-xs leading-4 mt-1 text-base-content border border-base-300 tooltip tooltip-bottom tooltip-no-touch" data-tip="Give a star on GitHub">
   <span class="flex items-center justify-between space-x-0.5 font-medium">
     <%= svg_icon('start', class: 'h-3 w-3') %>
     <span>18k</span>

app/views/shared/_settings_nav.html.erb

@@ -119,18 +119,18 @@
         <%= t('need_help_ask_a_question_') %>
       </div>
       <div class="flex mt-3 space-x-3">
-        <div class="tooltip" data-tip="GitHub">
+        <div class="tooltip tooltip-no-touch" data-tip="GitHub">
           <a href="<%= Docuseal::GITHUB_URL %>" target="_blank" class="btn btn-circle btn-primary btn-md">
             <%= svg_icon('brand_github', class: 'w-8 h-8') %>
           </a>
         </div>
-        <div class="tooltip" data-tip="<%= t('discord_community') %>">
+        <div class="tooltip tooltip-no-touch" data-tip="<%= t('discord_community') %>">
           <a href="<%= Docuseal::DISCORD_URL %>" target="_blank" class="btn btn-circle btn-primary btn-md">
             <%= svg_icon('brand_discord', class: 'w-8 h-8') %>
           </a>
         </div>
         <%= capture do %>
-          <div class="tooltip" data-tip="<%= t('ai_assistant') %>">
+          <div class="tooltip tooltip-no-touch" data-tip="<%= t('ai_assistant') %>">
             <a href="<%= Docuseal::CHATGPT_URL %>" target="_blank" class="btn btn-circle btn-primary btn-md">
               <%= svg_icon('message', class: 'w-8 h-8') %>
             </a>

app/views/submissions/_send_sms_button.html.erb

@@ -1,5 +1,5 @@
 <div class="mt-2 mb-1">
-  <div class="tooltip w-full" data-tip="<%= t('unlock_with_docuseal_pro') %>">
+  <div class="tooltip tooltip-no-touch w-full" data-tip="<%= t('unlock_with_docuseal_pro') %>">
     <%= link_to submitter.sent_at? ? t('re_send_sms') : t('send_sms'), Docuseal.multitenant? ? console_redirect_index_path(redir: "#{Docuseal::CONSOLE_URL}/plans") : "#{Docuseal::CLOUD_URL}/sign_up?#{{ redir: "#{Docuseal::CONSOLE_URL}/on_premises" }.to_query}", class: 'btn btn-sm btn-primary text-gray-400 w-full' %>
   </div>
 </div>

app/views/submissions/show.html.erb

@@ -180,7 +180,7 @@
                 </span>
               </div>
               <% if signed_in? && can?(:update, @submission) && submitter && !submitter.completed_at? && !@submission.completed_at? && !submitter.declined_at? && !@submission.archived_at? && !@submission.template&.archived_at? && !@submission.expired? && !submitter.start_form_submission_events.any? %>
-                <span class="tooltip tooltip-left" data-tip="<%= t('edit') %>">
+                <span class="tooltip tooltip-left tooltip-no-touch" data-tip="<%= t('edit') %>">
                   <%= link_to edit_submitter_path(submitter), class: 'shrink-0 inline md:hidden md:group-hover:inline', data: { turbo_frame: 'modal' } do %>
                     <%= svg_icon('pencil', class: 'w-5 h-5') %>
                   <% end %>

app/views/submissions_filters/_applied_filters.html.erb

@@ -11,7 +11,7 @@
   </div>
 <% end %>
 <% if params[:folder].present? %>
-  <div class="tooltip tooltip-bottom flex h-10 px-2 py-1 text-lg items-center justify-between border text-center text-neutral font-semibold rounded-xl w-full md:w-36 border-neutral-700" data-tip="<%= t('folder') %>">
+  <div class="tooltip tooltip-no-touch tooltip-bottom flex h-10 px-2 py-1 text-lg items-center justify-between border text-center text-neutral font-semibold rounded-xl w-full md:w-36 border-neutral-700" data-tip="<%= t('folder') %>">
     <%= link_to submissions_filter_path('folder', query_params.merge(path: url_for, with_remove: true)), data: { turbo_frame: 'modal' }, class: 'flex items-center space-x-1 flex-1 min-w-0 pr-1' do %>
       <%= svg_icon('folder', class: 'w-5 h-5 shrink-0') %>
       <span class="font-normal truncate"><%= params[:folder] %></span>
@@ -22,7 +22,7 @@
   </div>
 <% end %>
 <% if params[:author].present? %>
-  <div class="tooltip tooltip-bottom flex h-10 px-2 py-1 text-lg items-center justify-between border text-center text-neutral font-semibold rounded-xl w-full md:w-36 border-neutral-700" data-tip="<%= t('author') %>">
+  <div class="tooltip tooltip-no-touch tooltip-bottom flex h-10 px-2 py-1 text-lg items-center justify-between border text-center text-neutral font-semibold rounded-xl w-full md:w-36 border-neutral-700" data-tip="<%= t('author') %>">
     <%= link_to submissions_filter_path('author', query_params.merge(path: url_for, with_remove: true)), data: { turbo_frame: 'modal' }, class: 'flex items-center space-x-1 flex-1 min-w-0 pr-1' do %>
       <%= svg_icon('user', class: 'w-5 h-5 shrink-0') %>
       <span class="font-normal truncate"><%= current_account.users.accessible_by(current_ability).where(account: current_account).find_by(email: params[:author])&.full_name || 'NA' %></span>
@@ -33,7 +33,7 @@
   </div>
 <% end %>
 <% if query_params[:completed_at_from].present? || query_params[:completed_at_to].present? %>
-  <div class="tooltip tooltip-bottom flex h-10 px-2 py-1 text-lg items-center justify-between border text-center text-neutral font-semibold rounded-xl w-full md:w-36 border-neutral-700" data-tip="<%= t('completed_at') %>">
+  <div class="tooltip tooltip-no-touch tooltip-bottom flex h-10 px-2 py-1 text-lg items-center justify-between border text-center text-neutral font-semibold rounded-xl w-full md:w-36 border-neutral-700" data-tip="<%= t('completed_at') %>">
     <%= link_to submissions_filter_path('completed_at', query_params.merge(path: url_for, with_remove: true)), data: { turbo_frame: 'modal' }, class: 'flex items-center space-x-1 flex-1 min-w-0 pr-1' do %>
       <%= svg_icon('calendar_check', class: 'w-5 h-5 shrink-0') %>
       <span class="flex flex-row md:flex-col font-normal text-left md:text-center md:text-xs">
@@ -52,7 +52,7 @@
   </div>
 <% end %>
 <% if query_params[:created_at_from].present? || query_params[:created_at_to].present? %>
-  <div class="tooltip tooltip-bottom flex h-10 px-2 py-1 text-lg items-center justify-between border text-center text-neutral font-semibold rounded-xl w-full md:w-36 border-neutral-700" data-tip="<%= t('created_at') %>">
+  <div class="tooltip tooltip-no-touch tooltip-bottom flex h-10 px-2 py-1 text-lg items-center justify-between border text-center text-neutral font-semibold rounded-xl w-full md:w-36 border-neutral-700" data-tip="<%= t('created_at') %>">
     <%= link_to submissions_filter_path('created_at', query_params.merge(path: url_for, with_remove: true)), data: { turbo_frame: 'modal' }, class: 'flex items-center space-x-1 flex-1 min-w-0 pr-1' do %>
       <%= svg_icon('calendar', class: 'w-5 h-5 shrink-0') %>
       <span class="flex flex-row md:flex-col font-normal text-left md:text-center md:text-xs">

app/views/templates/_submission.html.erb

@@ -52,7 +52,7 @@
                 <%= submitter.name || submitter.email || submitter.phone %>
               </a>
               <% if !submitter.completed_at? && !submission.completed_at? && can?(:update, submission) && !submitter.start_form_submission_events.any? && !submission.archived_at? && !submission.expired? && !submitter.declined_at? %>
-                <span class="pl-0.5 tooltip tooltip-top md:opacity-0 md:hover:opacity-100 md:peer-hover:opacity-100" data-tip="<%= t('edit') %>">
+                <span class="pl-0.5 tooltip tooltip-top tooltip-no-touch md:opacity-0 md:hover:opacity-100 md:peer-hover:opacity-100" data-tip="<%= t('edit') %>">
                   <%= link_to edit_submitter_path(submitter), class: 'shrink-0', data: { turbo_frame: 'modal' } do %>
                     <%= svg_icon('pencil', class: 'w-5 h-5') %>
                   <% end %>
@@ -102,12 +102,12 @@
           </a>
         </div>
         <% if !submission.archived_at? && !template&.archived_at? && can?(:destroy, submission) %>
-          <span data-tip="<%= t('archive') %>" class="sm:tooltip tooltip-top">
+          <span data-tip="<%= t('archive') %>" class="sm:tooltip tooltip-top tooltip-no-touch">
             <%= button_to button_title(title: nil, disabled_with: nil, icon: svg_icon('archive', class: 'w-6 h-6'), icon_disabled: svg_icon('loader', class: 'w-6 h-6 animate-spin')), submission_path(submission), class: 'btn btn-outline btn-sm w-full md:w-fit', form: { class: 'flex' }, title: t('archive'), method: :delete %>
           </span>
         <% end %>
         <% if local_assigns[:archived] && can?(:destroy, submission) %>
-          <span data-tip="<%= t('remove') %>" class="sm:tooltip tooltip-top">
+          <span data-tip="<%= t('remove') %>" class="sm:tooltip tooltip-top tooltip-no-touch">
             <%= button_to button_title(title: nil, disabled_with: nil, icon: svg_icon('trash', class: 'w-6 h-6'), icon_disabled: svg_icon('loader', class: 'w-6 h-6 animate-spin')), submission_path(submission, permanently: true), class: 'btn btn-outline btn-sm w-full md:w-fit', form: { class: 'flex' }, title: t('remove'), method: :delete, data: { turbo_confirm: t('submission_deletion_is_irreversible_and_will_permanently_remove_all_associated_signed_documents_with_it_are_you_sure_') } %>
           </span>
         <% end %>
@@ -117,7 +117,7 @@
         <div class="flex flex-col md:flex-row md:items-center gap-3">
           <% if is_submission_completed %>
             <% latest_submitter = submitters.select(&:completed_at?).max_by(&:completed_at) %>
-            <a href="<%= submission_path(submission) %>" class="z-[1] tooltip flex" data-tip="<%= l(latest_submitter.status_event_at.in_time_zone(current_account.timezone), format: :short, locale: current_account.locale) %>">
+            <a href="<%= submission_path(submission) %>" class="z-[1] tooltip tooltip-no-touch flex" data-tip="<%= l(latest_submitter.status_event_at.in_time_zone(current_account.timezone), format: :short, locale: current_account.locale) %>">
               <span class="badge <%= status_badges[latest_submitter.status] %> md:w-32 bg-opacity-50 badge-lg uppercase text-sm font-semibold">
                 <%= t(latest_submitter.status) %>
               </span>
@@ -134,7 +134,7 @@
               <div class="relative flex justify-between items-start md:items-center space-x-3">
                 <span class="flex flex-col md:flex-row md:items-center gap-2">
                   <% if !is_submission_completed && !submission.expired? %>
-                    <a href="<%= submission_path(submission) %>" class="z-[1] tooltip flex" data-tip="<%= l(submitter.status_event_at.in_time_zone(current_account.timezone), format: :short, locale: current_account.locale) %>">
+                    <a href="<%= submission_path(submission) %>" class="z-[1] tooltip tooltip-no-touch flex" data-tip="<%= l(submitter.status_event_at.in_time_zone(current_account.timezone), format: :short, locale: current_account.locale) %>">
                       <span class="badge md:w-24 <%= status_badges[submitter.status] %> bg-opacity-50 uppercase text-xs font-semibold">
                         <%= t(submitter.status) %>
                       </span>
@@ -145,7 +145,7 @@
                       <%= submitter.name || submitter.email || submitter.phone %>
                     </a>
                     <% if !submitter.completed_at? && !submission.completed_at? && can?(:update, submission) && !submitter.start_form_submission_events.any? && !submission.archived_at? && !submission.expired? && !submitter.declined_at? %>
-                      <span class="pl-0.5 tooltip tooltip-top md:opacity-0 md:hover:opacity-100 md:peer-hover:opacity-100" data-tip="<%= t('edit') %>">
+                      <span class="pl-0.5 tooltip tooltip-top tooltip-no-touch md:opacity-0 md:hover:opacity-100 md:peer-hover:opacity-100" data-tip="<%= t('edit') %>">
                         <%= link_to edit_submitter_path(submitter), class: 'shrink-0', data: { turbo_frame: 'modal' } do %>
                           <%= svg_icon('pencil', class: 'w-5 h-5') %>
                         <% end %>
@@ -209,12 +209,12 @@
           </a>
         </div>
         <% if !submission.archived_at? && !template&.archived_at? %>
-          <span data-tip="<%= t('archive') %>" class="sm:tooltip tooltip-top">
+          <span data-tip="<%= t('archive') %>" class="sm:tooltip tooltip-top tooltip-no-touch">
             <%= button_to button_title(title: nil, disabled_with: nil, icon: svg_icon('archive', class: 'w-6 h-6'), icon_disabled: svg_icon('loader', class: 'w-6 h-6 animate-spin')), submission_path(submission), class: 'btn btn-outline btn-sm w-full md:w-fit', form: { class: 'flex' }, title: t('archive'), method: :delete %>
           </span>
         <% end %>
         <% if local_assigns[:archived] && can?(:destroy, submission) %>
-          <span data-tip="<%= t('remove') %>" class="sm:tooltip tooltip-top">
+          <span data-tip="<%= t('remove') %>" class="sm:tooltip tooltip-top tooltip-no-touch">
             <%= button_to button_title(title: nil, disabled_with: nil, icon: svg_icon('trash', class: 'w-6 h-6'), icon_disabled: svg_icon('loader', class: 'w-6 h-6 animate-spin')), submission_path(submission, permanently: true), class: 'btn btn-outline btn-sm w-full md:w-fit', form: { class: 'flex' }, title: t('remove'), method: :delete, data: { turbo_confirm: t('submission_deletion_is_irreversible_and_will_permanently_remove_all_associated_signed_documents_with_it_are_you_sure_') } %>
           </span>
         <% end %>

app/views/templates/_template.html.erb

@@ -31,35 +31,35 @@
   <div class="absolute top-0 bottom-0 w-0 items-center hidden md:group-hover:flex" style="right: 37px" data-targets="dashboard-dropzone.hiddenOnDrag">
     <div class="space-y-1">
       <% if can?(:update, template) && !template.archived_at? && template.account_id == current_account.id %>
-        <span class="tooltip tooltip-left" data-tip="<%= t('move') %>">
+        <span class="tooltip tooltip-left tooltip-no-touch" data-tip="<%= t('move') %>">
           <a href="<%= edit_template_folder_path(template.id) %>" data-turbo-frame="modal" class="btn btn-xs hover:btn-outline bg-base-200 btn-circle">
             <%= svg_icon('folder_share', class: 'w-4 h-4') %>
           </a>
         </span>
       <% end %>
       <% if template.archived_at? && can?(:destroy, template) %>
-        <span class="tooltip tooltip-left" data-tip="<%= t('restore') %>">
+        <span class="tooltip tooltip-left tooltip-no-touch" data-tip="<%= t('restore') %>">
           <%= button_to template_restore_index_path(template), class: 'btn btn-xs hover:btn-outline bg-base-200 btn-circle' do %>
             <%= svg_icon('rotate', class: 'w-4 h-4 enabled') %>
             <%= svg_icon('loader', class: 'w-4 h-4 animate-spin disabled') %>
           <% end %>
         </span>
       <% elsif !template.archived_at? && can?(:update, template) %>
-        <span class="tooltip tooltip-left" data-tip="<%= t('edit') %>">
+        <span class="tooltip tooltip-left tooltip-no-touch" data-tip="<%= t('edit') %>">
           <a href="<%= edit_template_path(template) %>" class="btn btn-xs hover:btn-outline bg-base-200 btn-circle">
             <%= svg_icon('pencil', class: 'w-4 h-4') %>
           </a>
         </span>
       <% end %>
       <% if can?(:create, template) %>
-        <span class="tooltip tooltip-left" data-tip="<%= t('clone') %>">
+        <span class="tooltip tooltip-left tooltip-no-touch" data-tip="<%= t('clone') %>">
           <a href="<%= new_template_clone_path(template) %>" data-turbo-frame="modal" class="btn btn-xs hover:btn-outline bg-base-200 btn-circle">
             <%= svg_icon('copy', class: 'w-4 h-4') %>
           </a>
         </span>
       <% end %>
       <% if can?(:destroy, template) %>
-        <span class="tooltip tooltip-left" data-tip="<%= template.archived_at? ? t('delete') : t('archive') %>">
+        <span class="tooltip tooltip-left tooltip-no-touch" data-tip="<%= template.archived_at? ? t('delete') : t('archive') %>">
           <%= button_to template_path(template), data: template.archived_at? ? { turbo_confirm: t('template_deletion_is_irreversible_and_will_permanently_remove_all_associated_signed_documents_with_it_are_you_sure_') } : {}, params: { permanently: template.archived_at? }.compact_blank, method: :delete, class: 'btn btn-xs hover:btn-outline bg-base-200 btn-circle', aria_label: t('restore') do %>
             <%= svg_icon(template.archived_at? ? 'trash' : 'archive', class: 'w-4 h-4 enabled') %>
             <%= svg_icon('loader', class: 'w-4 h-4 animate-spin disabled') %>

app/views/templates_share_link/show.html.erb

@@ -26,7 +26,7 @@
         <div class="relative flex-grow">
           <input id="embedding_url" type="text" value="<%= start_form_url(slug: @template.slug, host: form_link_host) %>" class="base-input w-full pr-10" autocomplete="off" readonly>
           <% if @template.variables_schema.blank? && !@template.preferences&.dig('require_email_2fa') && !@template.preferences&.dig('require_phone_2fa') %>
-            <a href="<%= template_share_link_qr_path(@template) %>" target="_blank" rel="noopener" class="absolute top-1/2 -translate-y-1/2 right-2 flex items-center justify-center tooltip text-base-content/70 hover:text-base-content bg-white rounded px-1 py-0.5" data-tip="<%= t('qr_code') %>" aria-label="<%= t('qr_code') %>">
+            <a href="<%= template_share_link_qr_path(@template) %>" target="_blank" rel="noopener" class="absolute top-1/2 -translate-y-1/2 right-2 flex items-center justify-center tooltip tooltip-no-touch text-base-content/70 hover:text-base-content bg-white rounded px-1 py-0.5" data-tip="<%= t('qr_code') %>" aria-label="<%= t('qr_code') %>">
               <%= svg_icon('qrcode', class: 'w-6 h-6') %>
             </a>
           <% end %>

app/views/webhook_settings/show.html.erb

@@ -25,7 +25,7 @@
                 <%= svg_icon('lock', class: 'w-4 h-4') %>
                 <span><%= t('security') %></span>
               <% end %>
-              <div class="tooltip tooltip-left md:tooltip-top" data-tip="<%= t('delete_webhook') %>">
+              <div class="tooltip tooltip-left md:tooltip-top tooltip-no-touch" data-tip="<%= t('delete_webhook') %>">
                 <%= button_to settings_webhook_path(@webhook_url), class: 'btn btn-warning btn-sm', method: :delete, data: { turbo_confirm: t('are_you_sure_') } do %>
                   <span><%= t('delete') %></span>
                 <% end %>