Simple form Question mark next to label, to display bootstrap tooltip during hover or click - Ruby

Question

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

Cretinism

Answer 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;
}

Harsho

I'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? – Cretinism

Don't put it inside a block. – Harsho

The 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 – Cretinism

OK, 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! – Cretinism

Answer 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.

Pergola

Answer 3

For bootstrap 5.1, to make this:

<span data-bs-toggle="tooltip" data-bs-placement="right" title="Here's some amazing content.">
  <i class="bi bi-question-circle" style="font-size: 1.5rem;"></i>
</span>

And add this to javascript/application.js

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl)
})

Source

• Adapted from bootstrap 5.1 docs examples

Acquirement