'How can I add a Tooltip to a record in ActiveAdmin index page?

My app has a pretty standard index page that lists all records in an ActiveRecord table.

I want to add a tooltip that provides some custom info when the mouse hovers over a row in the index page. However, my Google and Stackoverflow searches have yielded nothing on-target. (I suspect that if I were more familiar with ActiveAdmin and its components, I might have found the answer embedded in the documents I scanned.)

Can anybody provide me with the missing link? Thanks!

ruby-on-railstooltipactiveadmin


Solution 1:[1]

A colleague reminded me of the HTML4+ 'title' attribute, which actually displays a text-only tooltip when hovering on the element. Here is how I was able to implement it:

app/admin/some_models.rb

ActiveAdmin.register SomeModel do
  ...
  index do
    ...
        column some_field do |some_model|
          div(title: 'tooltip text - can be a helper method call') do
            some_model.some_field # the value to be displayed in the column
          end
        end
    ...

If a plain text tooltip is not sufficient, it would be necessary to add an onmouseover event listener to a style defined in the div or in the css defined for the div's class (class: must be specified in the div), then add a javascript function in app/assets/javascripts/active_admin.js or elsewhwere.

I hope this helps someone.

Solution 2:[2]

There are several options available here: http://www.unheap.com/section/user-interface/tool-tips/

Solution 3:[3]

You can do this in one line if you pass title as an optional argument to an attributes table row:

attributes_table do
  row 'I am a row label', title: 'I am a tooltip', &:some_attribute_name
end

If your first (label) argument isn't a string or symbol, it will default to using the title argument as the label. You can read more about this in the ActiveAdmin source code for attributes_table.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Edwin Meyer
Solution 2 jljohnstone
Solution 3 Allison

Related Questions