Bootstrap Popover with Simple_Form

Question

So i'm trying a while now to get the popover work with Simple_form..

My register.js.coffee file:

$(".user_first_name").popover()

My Input:

  <%= f.input :first_name, input_html: { class: "user_first_name", :rel => "popover", 'data-toggle:' => 'popover', 'data-trigger:' => 'hover', 'data-content:' => 'Some popover content' }%>

I tried in many ways to get this working but i don't know what i'm missing..

The Html Outpout of this is :

<div class="controls">
  <input autofocus="autofocus" 
  class="string required user_first_name" 
  data-content:="Some popover content" 
  data-toggle:="popover" 
  data-trigger:="hover" 
  id="user_first_name" 
  name="user[first_name]" 
  rel="popover" 
  type="text">
</div>

A working Example

What am i missing ?

Answer 1

The data attributes are wrong. Try this:

<%= f.input :first_name, input_html: { class: "user_first_name", rel: "popover", data: { toggle: 'popover', trigger: 'hover', content: 'Some popover content' } %>