Simple form Question mark next to label, to display bootstrap tooltip during hover or click - Ruby
Solution 1
You could add
<span data-toggle='tooltip' title='<%= @your_tooltip_content %>'>?</span>
anywhere you need it. For example :
<%= f.input :phone, placeholder: "Phone Number"%>
<span data-toggle='tooltip' title='We need your phone number because...'>?</span>
EDIT:
This is the best I could do to display ?
with tooltip on the same line :
<%= f.input :phone, label_html: { "data-tooltip" => true, :class => "has-tip", :title => "We need your phone number because..."} %>
In your CSS (e.g. app/assets/stylesheets/application.scss
), you can add :
.has-tip:after{
font-family: "Glyphicons Halflings";
content: " \e085";
color: #aaaaaa;
}
Solution 2
Based off the bootstrap helpers mentioned in the simple_form wiki, with the following, I was able to simply add a tooltip like so:
<%= f.input :phone, placeholder: "Phone Number", tooltip: 'We need your phone number because...' %>
I just needed to add the tooltip component below:
# config/initializers/simple_form_components.rb:
module SimpleForm
module Components
module Tooltips
def tooltip(wrapper_options = nil)
@tooltip ||= begin
content = tooltip_text
options[:tooltip_html] ||= {}
options[:tooltip_html][:title] = content
options[:tooltip_html]['data-toggle'] = 'tooltip'
options[:tooltip_html]['data-placement'] = tooltip_position
options[:tooltip_html]['tabindex'] = '0'
content ? '' : nil
end
end
def tooltip_text
tooltip = options[:tooltip]
if tooltip.is_a?(String)
html_escape(tooltip)
elsif tooltip.is_a?(Array)
if tooltip[1].is_a?(String)
html_escape(tooltip[1])
else
content = translate_from_namespace(:tooltips)
content.html_safe if content
end
else
content = translate_from_namespace(:tooltips)
content.html_safe if content
end
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)
And change the config/initializers/simple_form_bootstrap.rb
file to include the use :tooltip
component after each use :label
, like so:
# Use this setup block to configure all options available in SimpleForm.
SimpleForm.setup do |config|
config.error_notification_class = 'alert alert-danger'
config.button_class = 'btn btn-default'
config.boolean_label_class = nil
config.wrappers :vertical_form, tag: 'div', class: 'form-group', error_class: 'has-error' do |b|
b.use :html5
b.use :placeholder
b.optional :maxlength
b.optional :minlength
b.optional :pattern
b.optional :min_max
b.optional :readonly
b.use :label, class: 'control-label'
b.use :tooltip, wrap_with: { tag: 'span', class: 'glyphicon glyphicon-question-sign text-muted' }
b.use :input, class: 'form-control'
b.use :error, wrap_with: { tag: 'span', class: 'help-block' }
b.use :hint, wrap_with: { tag: 'p', class: 'help-block' }
end
config.wrappers :vertical_file_input, tag: 'div', class: 'form-group', error_class: 'has-error' do |b|
b.use :html5
b.use :placeholder
b.optional :maxlength
b.optional :minlength
b.optional :readonly
b.use :label, class: 'control-label'
b.use :tooltip, wrap_with: { tag: 'span', class: 'glyphicon glyphicon-question-sign text-muted' }
b.use :input
b.use :error, wrap_with: { tag: 'span', class: 'help-block' }
b.use :hint, wrap_with: { tag: 'p', class: 'help-block' }
end
... rest of file omitted for brevity...
And with a little css to space it correctly:
span[data-toggle='tooltip'] {
margin-left: .25em;
}
And the javascript that bootstrap requires to activate it:
$('[data-toggle="tooltip"]').tooltip();
It worked great. I'm using bootstrap 3, rails 5 and simple_form 4.
Related videos on Youtube
DanRio
Updated on June 04, 2022Comments
-
DanRio almost 2 years
Using the Simple Form gem and bootstrap, I'm trying to figure out a way - using Ruby - to add a tooltip next to a form label in the form of a question mark, that displays the tip on hover or click. I'm struggling to find any relevant information to help.
What would I need to add to the standard form input below? I've tried a variety of things but nothing seems close.
<%= f.input :phone, placeholder: "Phone Number" %>
When I try the following, the input field isn't shown:
<%= f.input :phone, placeholder: "Phone Number" do %> <span data-toggle='tooltip' title='We need your phone number because...'>?</span> <% end %>
Many Thanks
-
DanRio over 7 yearsI've tried using this like the following: <%= f.input :phone, placeholder: "Phone Number" do %> <span data-toggle='tooltip' title='We need your phone number because...'>?</span> <% end %> But it makes the form input field disappear, any idea's?
-
Eric Duminil over 7 yearsDon't put it inside a block.
-
DanRio over 7 yearsThe only problem with that is it put's the "?" underneath the input field - rather than next to the label which is what I'm trying to achieve
-
DanRio over 7 yearsOK, I will need it to be clickable and to appear quicker on hover (seems to be taking a few seconds) so I'll need to work on it, but get's me started. Thanks for your help!