Bootstrap 4 form fields with tooltips

In this tutorial/freebie we’ll show you how to add slick tooltips to display help text to users when they hover form fields. This can be a great way of saving space on long forms.

First up

Tooptips were added to Bootstrap a few years back so are not a new feature, BUT with Bootstrap 4 came a new dependency in the form of the third-party plugin Tether. The tether.min.js file must be included before bootstrap.js in order for tooltips to work:

<!-- Tether plugin, needed for tooltip plugin -->
<script src="https://cdn.rawgit.com/HubSpot/tether/master/dist/js/tether.min.js"></script>
    
<!-- Bootstrap (version: v4.0.0-alpha.2) JS via MaxCDN or path to local copy ie. plugins/bootstrap/dist/js/bootstrap.min.js-->
<script src="https://cdn.rawgit.com/twbs/bootstrap/v4.0.0-alpha.3/dist/js/bootstrap.min.js"></script>

 


HTML form

Next up we need some HTML form markup. Check the Bootstrap 4 forms documentation to get up to speed on Bootstrap 4 form related changes.

For the tooltips to work our form element needs to have a data-toggle="form-tooltips" attribute and within that it will look for the .form-control element to use as the trigger and the .form-text element to use as the content for the tooltip. Our whole form looks like so:

<form data-toggle="form-tooltips" data-settings='{"align":"right", "alignmobile":"bottom", "trigger":"click"}'>
  
  <!-- Email field -->
  <div class="form-group row">
    <label for="contact-form-email" class="col-md-2 text-md-right col-form-label col-form-label-lg">Email address</label>
    <div class="col-md-10">
      <input name="email" type="email" class="form-control form-control-lg" id="contact-form-email" aria-describedby="contact-form-email-help" placeholder="Enter your email">
      <small id="contact-form-email-help" class="form-text text-muted">A valid email address so we can reply to you.</small>
    </div>
  </div>
  
  <!-- Name Type field -->
  <div class="form-group row">
    <label for="contact-form-name" class="col-md-2 text-md-right col-form-label col-form-label-lg">Name</label>
    <div class="col-md-10">
      <input name="name" type="text" class="form-control form-control-lg" id="contact-form-name" aria-describedby="contact-form-name-help" placeholder="Enter your name">
      <small id="contact-form-name-help" class="form-text text-muted">Your first and last names.</small>
    </div>
  </div>         
  
  <!-- Message field -->
  <div class="form-group row">
    <label for="contact-form-message" class="col-md-2 text-md-right col-form-label col-form-label-lg">Your Message</label>
    <div class="col-md-10">
      <textarea name="message" class="form-control form-control-lg" id="contact-form-message" aria-describedby="contact-form-message-help" placeholder="Enter your message" rows="5"></textarea>
      <small id="contact-form-message-help" class="form-text text-muted">Your first and last names.</small>
    </div>
  </div>
  
  <!-- Send button -->
  <div class="form-group row">
    <div class="offset-md-2 col-md-10">
      <button type="submit" class="btn btn-primary btn-lg">Send</button>
    </div>
  </div>
  
</form>

data-settings

Some of you probably noticed the form element had an extra data-settings='{}' attribute set containing an object array of settings. These settings are passed to jQuery to control how the tooltips function.

The settings available to use are: * All default Bootstrap tooltip options minus placement and title * “align”: controls placement of tooltip on screenwidths wider than 400px, can be top | bottom | left | right * “alignmobile”: controls placement of tooltip on screenwidths smaller than 400px, can be top | bottom | left | right

“align” & “alignmobile” can be useful if you want to align tooltips vertically on mobile.

Example:

data-settings='{"align":"right", "alignmobile":"bottom", "trigger":"click"}'

= align right by default, align bottom on mobile, triggered when form element is “clicked”


Javascript

Next we use some simple jQuery to find all the [data-toggle="form-tooltips"] elements and extract the .form-text elements text to use for the tooltips. We also see if any custom settings are being passed via the data-settings attribute.

Lastly, we add a custom “placement” callback function (which the Bootstrap tooltip plugin allows) so we can switch the “align” and “alignmobile” settings based on the screen width and the we trigger the “tooltip” plugin itself.

$(document).ready(function() {
  // Find all data-toggle="form-tooltips" elements
  // =========================
  var $formToolTips = $('[data-toggle="form-tooltips"] .form-group');
  var mobileWidth = 400; // controls when alignmobile setting should kick in
  
  $.each($formToolTips, function() {
    var $this = $(this),
      $formToolTipControl = $this.find('.form-control'), // form input
      $formToolTipText = $this.find('.form-text'), // form help text
      $parent = $this.parent('[data-toggle="form-tooltips"]'),
      options = $parent.data('settings') || {}; 
      
    if ($formToolTipText.size() > 0) {
      $formToolTipText.hide(); // hide .form-text elements
      
      // Enforced options
      options.title = $formToolTipText.text();
      options.placement = function(tooltip, trigger) {
        if ($(window).width() < mobileWidth) {
          return this.config.alignmobile || 'top';
        }
        return this.config.align || 'top';
      };
      $formToolTipControl.tooltip(options);
    }
  });
});

 

No Coments

    Leave a Reply

    Your email address will not be published. Required fields are marked *