Recently we have used WebUI-Popover plugin in Active Admin. It is a lightWeight popover plugin with jquery.

  • It can be use with bootstrap, but bootstrap is not necessary!
  • Browser compatibility for this plugin is ie8+,Chrome,Safari,Firefox,Opera.
  • We need jquery1.7.1+ for this.

Steps For adding WebUI-Popover are:

  1. Download from https://codeload.github.com/sandywalker/webui-popover/zip/1.1.2

  2. Extract zip folder go into src folder copy jquery.webui-popover.css this file and paste in app/assets/stylesheets of your project.

  3. Same for jquery.webui-popover.js paste in app/assets/javascripts

  4. in your "active_admin.js.coffee"

#= require jquery.webui-popover
  1. in your "active_admin.scss"
 *= require jquery.webui-popover

Requirement:
In our project, we needed to display a popover for Questions Page of Active Admin.
On this page there is column of Question Title, which is truncated and when we hover on that question the complete Question Title should display in popover.
This popover should be changed dynamically when we hover on another question.

For this we have added a code in our Question admin page.

link_to truncate_html(question.title,length:100), admin_question_path(id: question.id), 
"data-content" =>  "#{question.title.html_safe}", class: "index_question"

and then use class: "index_question" in "active_admin.js.coffee" for applying webuipopover.
following code is used to add functionality of webuipopover on Questions page of our project.

$(document).ready ->
  $('.index_question').webuiPopover
    trigger: 'hover'
    placement: 'bottom-right'
    width: 600
  return

And Its done!!