Just a quick post on how easy it is to implement a popover with twitter bootsrap:
JavaScript:
//Create tooltips for login/signup forms function create_tooltips(){ //Create vars var titles = ['test title'] var contents = ['test content']; var fields = ['#user_email']; //Loop through each field and assign tooltip for(var i = 0; i < fields.length; i++){ //Create vars var field = $(fields[i]); var title = titles[i]; var content = contents[i]; //Ensure field found if(field){ //Create popover $(field).popover( { animation: true, placement: 'right', selector: false, trigger: 'hover', title: title, content: content, delay: 0 }); } } } |
Form:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | <div class="span4">
<%= form_for(resource, :as => resource_name, :url => registration_path(resource_name), :class => 'form-vertical') do |f| %>
<fieldset class="well">
<div class="control-group">
<%= f.label :email, 'Email:' %>
<div class="controls">
<%= f.email_field :email %>
</div>
</div>
<div class="control-group">
<%= f.label :display_name, 'Display Name:' %>
<div class="controls">
<%= f.text_field :display_name %>
</div>
</div>
<div class="control-group">
<%= f.label :password, 'Password:' %>
<div class="controls">
<%= f.password_field :password %>
</div>
</div>
<div class="control-group">
<%= f.label :password_confirmation, 'Password Confirmation:'%>
<div class="controls">
<%= f.password_field :password_confirmation %>
</div>
</div>
<div class="control-group">
<%= f.submit "Sign up", :class => 'btn btn-success' %>
</div>
</fieldset>
<% end %>
</div> |
Result:
That’s all there is to it, if you haven’t had a chance to check it out yet make sure you head on over to the official site - there are some pretty neat features.


Pingback: Cameron Stitt