Are you looking to enhance your Rails application’s user interface with sleek Bootstrap tooltips? This guide will walk you through implementing tooltips on your Rails buttons, making your UI more informative and user-friendly.

Prerequisites

• Rails 7 application
• Bootstrap 5 installed
• Basic understanding of Rails and ERB

Step 1: Set Up Bootstrap Dependencies

First, ensure Bootstrap is properly configured in your Rails application. If you’re using importmaps, add this to your config/importmap.rb:

pin "bootstrap", to: "https://ga.jspm.io/npm:bootstrap@5.2.3/dist/js/bootstrap.esm.js"

Then, import Bootstrap in your app/javascript/application.js:

import "bootstrap"

Step 2: Initialize Tooltips

Add the following JavaScript to initialize Bootstrap tooltips. This code ensures tooltips work even with Turbo Drive navigation:

// app/javascript/application.js
document.addEventListener("turbo:load", function() {
  const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
  const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => 
    new bootstrap.Tooltip(tooltipTriggerEl)
  )
});

Step 3: Implement Tooltip Buttons

Option 1: Using link_to Helper

<%= link_to "#", class: "btn btn-lg btn-outline-light border-0 float-end mt-1 ms-2 me-2 align-middle",
    data: { 
      bs_toggle: "tooltip",
      bs_placement: "top",
      bs_title: "Print PDF"
    } do %>
  <i class="bi bi-filetype-pdf"></i>
<% end %>

Option 2: Using button_tag Helper

<%= button_tag type: "button",
    class: "btn btn-lg btn-outline-light border-0 float-end mt-1 ms-2 me-2 align-middle",
    data: { 
      bs_toggle: "tooltip",
      bs_placement: "top",
      bs_title: "Print PDF"
    } do %>
  <i class="bi bi-filetype-pdf"></i>
<% end %>

Step 4: Create a Reusable Helper (Optional)

For better code organization and reusability, create a helper method:

# app/helpers/application_helper.rb
def tooltip_button(title:, icon_class:, **options)
  default_classes = "btn btn-lg btn-outline-light border-0 float-end mt-1 ms-2 me-2 align-middle"

  button_tag(
    type: "button",
    class: "#{default_classes} #{options[:class]}",
    data: {
      bs_toggle: "tooltip",
      bs_placement: options[:placement] || "top",
      bs_title: title
    }.merge(options[:data] || {})
  ) do
    content_tag(:i, nil, class: icon_class)
  end
end

Then use it in your views:

<%= tooltip_button(
  title: "Print PDF",
  icon_class: "bi bi-filetype-pdf"
) %>

Customization Options

You can customize your tooltips by adjusting these attributes:

• data-bs-placement: Set to “top”, “bottom”, “left”, or “right”
• data-bs-title: Your tooltip text
• Add custom classes for styling
• Modify the icon class for different icons

Common Issues and Solutions

1. Tooltips not showing: Make sure Bootstrap JavaScript is properly initialized
2. Tooltips not working after navigation: Verify the turbo:load event listener is properly set up
3. Icons not displaying: Ensure Bootstrap Icons are included in your application

Best Practices

• Keep tooltip text concise and meaningful
• Use consistent placement for similar actions
• Ensure tooltip text is accessible and clear
• Test tooltips on different screen sizes

Conclusion

Adding tooltips to your Rails buttons is a simple way to improve your application’s user experience. By following this guide, you can implement professional-looking tooltips that work seamlessly with Rails 7 and Bootstrap 5.

Additional Resources

• Bootstrap Tooltips Documentation
• Rails Asset Pipeline Guide
• Bootstrap Icons

This implementation provides a clean, maintainable solution for adding tooltips to your Rails application. Have questions or need clarification? Feel free to leave a comment below!