removing stylesheet link and refactoring

app/views/organizations/adoptable_pets/show.html.erb

@@ -1,5 +1,3 @@
-<%= stylesheet_link_tag "https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css", rel: "stylesheet" %>
-
 <header class="pt-5 pb-5">
   <div class="row align-items-center">
     <!-- Pet Info -->
@@ -157,19 +155,23 @@
                   <% else %>
                     <%= image_tag('green_check.png', height: '21') %>
                     <% if 'awaiting_review' == @adoption_application.status %>
-                        <span class="d-inline-block" tabindex="0" 
-                              data-bs-toggle="tooltip" title="Please make sure you fill out the adoption questionnaire so staff have enough information to process your application.">
-                          <i class="bi bi-info-circle fs-4 text-secondary ps-1"></i>
-                        </span>
+                        <button type="button" 
+                                class="btn btn-outline-secondary btn-xs" 
+                                style="border-radius: 50%; width: 20px; height: 20px; padding: 0; margin-left: 1px;" 
+                                data-bs-toggle="tooltip" 
+                                data-placement="top" 
+                                title="Please make sure you fill out the adoption questionnaire so staff have enough information to process your application.">
+                          i
+                        </button>
 
-                      <script>
-                        document.addEventListener("DOMContentLoaded", function() {
-                          var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
-                          tooltipTriggerList.forEach(function (tooltipTriggerEl) {
-                            new bootstrap.Tooltip(tooltipTriggerEl);
+                        <script>
+                          document.addEventListener("DOMContentLoaded", function () {
+                            var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
+                            tooltipTriggerList.forEach(function (tooltipTriggerEl) {
+                              new bootstrap.Tooltip(tooltipTriggerEl);
+                            });
                           });
-                        });
-                      </script>
+                        </script>
                     <% end %>
                   <% end %>
                 </div>