CODEWITHSUNDEEP
javascriptjquerycssruby-on-railstwitter-bootstrap
Godzilla74
Godzilla74

Reputation: 2502

Bootstrap JS not working in Rails 4

I'm running into an issue where the Javascript portions of Bootstrap aren't working with my Rails app. For instance, the code below should use the Bootstrap version of the popover, however, I'm just getting a basic tooltip to appear when I hover over my link. What am I missing?

what is showing up

GemFile

gem "bootstrap-sass"

application.js

//= require modernizr
//= require jquery
//= require jquery_ujs
//= require jquery.cookie
//= require jquery.piechart
//= require jquery.dlmenu
//= require jquery.tooltipster
//= require bootstrap-sprockets
//= require mithril
//= require_tree .

application.css.scss

/*
*= require bootstrap
*= require font-awesome.min
*= require tooltipster
*= require_self
*/

@import "normalize";
@import "util";
@import "bootstrap-sprockets";
@import "bootstrap";
@import "fonts";
@import "app";
@import "media-queries";
@import "login";
@import "header";
@import "alerts";
@import "hero";
@import "feedback";
@import "reports";
@import "main-content";
@import "popovers";
@import "push-menus";
@import "footer";

index.html.erb

<a tabindex="0" role="button" 
  data-toggle="popover" data-trigger="focus" 
  title="Severity Score" data-content="Severity score is...">
  <%= image_tag("tooltips/tooltip-question.png") %>
</a>

Upvotes: 2

Views: 833

Answers (1)

laffuste
laffuste

Reputation: 17095

You need to enable popovers via JS:

Template (added class but you can use id or whatever):

<a class="popover" tabindex="0" role="button" 
  data-toggle="popover" data-trigger="focus" 
  title="Severity Score" data-content="Severity score is...">
  <%= image_tag("tooltips/tooltip-question.png") %>
</a>

JS code:

$(function() {
    $('.popover').popover();
});

If you plan to use the same options for all popovers, you can use the following selector:

$("[data-toggle=popover]").popover({placement: 'right'});

Upvotes: 1

Related Questions