私は慎重に次の指示に従いました: https://github.com/plataformatec/simple_form/wiki/Bootstrap-component-helpers
しかし、ページが読み込まれるたびに、ブラウザーコンソールに次の JS エラーが表示されるという問題が発生し続けます。
Uncaught TypeError: undefined is not a function
この行の周り:
$('body').tooltip({ selector: "[data-toggle~='tooltip']"});
.tooltip
イニシャライザが機能しているように見えるため、問題を引き起こしているのは だと思います。生成された html にはdata-toggle
、JS セレクターに必要な属性が含まれているため、わかります。
bootstrap-sass
宝石を使用しています。
ここに私のsimple_form_bootstrap
イニシャライザがあります:
SimpleForm.setup do |config|
config.wrappers :bootstrap, tag: 'div', class: 'control-group', error_class: 'error' do |b|
b.use :html5
b.use :placeholder
b.use :label
b.use :tooltip
b.wrapper tag: 'div', class: 'controls' do |ba|
ba.use :input
ba.use :error, wrap_with: { tag: 'span', class: 'help-inline' }
ba.use :hint, wrap_with: { tag: 'p', class: 'help-block' }
end
end
# Truncated for brevity
config.default_wrapper = :bootstrap
end
ここに私のsimple_form_components.rb
イニシャライザがあります:
module SimpleForm
module Components
module Tooltips
def tooltip
unless tooltip_text.nil?
input_html_options[:rel] ||= 'tooltip'
input_html_options['data-toggle'] ||= 'tooltip'
input_html_options['data-placement'] ||= tooltip_position
input_html_options['data-trigger'] ||= 'focus'
input_html_options['data-original-title'] ||= tooltip_text
nil
end
end
def tooltip_text
tooltip = options[:tooltip]
tooltip.is_a?(String) ? tooltip : tooltip.is_a?(Array) ? tooltip[1] : nil
end
def tooltip_position
tooltip = options[:tooltip]
tooltip.is_a?(Array) ? tooltip[0] : "right"
end
end
end
end
SimpleForm::Inputs::Base.send(:include, SimpleForm::Components::Tooltips)
私は私の中でこのように呼んだ_form.html.erb
:
<%= f.input :title, placeholder: "Enter Title", tooltip: ["bottom", "Must be as it appears in the BANK STATEMENT"] %>
これは私のものですpost.js
-簡潔にするために切り捨てられています:
$(document).ready(function () {
$('#count').click(counter);
$('#post_body, #post_title').on('change keydown keypress keyup blur focus', counter);
$('body').tooltip({ selector: "[data-toggle~='tooltip']"});
});
これは私の上部ですapplication.js
:
//= require jquery
//= require jquery_ujs
//= require jquery.turbolinks
//= require bootstrap
//= require bootstrap/dropdown
//= require bootstrap/modal
//= require bootstrap/tooltip
//= require turbolinks
//= require_tree .