VEIT JOSEF SCHNEIDER
UX Design | Visual Design | Audio Design

Add Info Icon/Box Besides Form Labels In Voxel Child

Category:

Tags:

In this guide I will show you how to add info icon and box besides the form label in the voxel post submission forms to add more info and content within it as a kind of drop down or popup.

  • First you need to create a “bio-modal.js” file in the Voxel child them folder under js folder.
  • Add something like this (you need to check for the selector for the label of the field and replace it):
// Show/hide BIO/DESCRIPTION modal
jQuery(document).ready(function($) {
  // Inject the bio info icon
  $('.ts-form-group.field-key-description > label').each(function() {
    var label = $(this);
    var smallElement = label.find('small');

    if (smallElement.length > 0) {
      smallElement.append('<span id="bio-info" class="modal-info-icon" title="How to create a perfect Bio/Description?">
<i class="las la-info-circle"></i></span><div id="bio-info-modal" class="info-modal hidden"><h3>How to create a perfect Bio/Description?</h3>
<p>Creating the perfect bio/description is all about expressing yourself.</p><a href="#" target="_blank">Learn More</a>');
    } else {
      label.append('<span id="bio-info-info" class="modal-info-icon" title="How to create a perfect Bio/Description?">
<i class="las la-info-circle"></i></span><div id="bio-info-modal" class="info-modal hidden"><h3>How to create a perfect Bio/Description?</h3>
<p>Creating the perfect bio/description is all about expressing yourself</p><a href="#" target="_blank">Learn More</a>');
    }
  });

  // Show/hide modal and toggle icon color
  $(document).on('click', '#bio-info', function() {
    var infoIcon = $('#bio-info');
    var modal = $('#bio-info-modal');

    modal.toggleClass('hidden');
    infoIcon.toggleClass('active');
  });
});
  • Then on the create post template you need to add following into a HTML code module:
<script src="/wp-content/themes/voxel-child/js/bio-modal.js"></script>
  • And last some ideas on styling that you can adapt to your needs:
/* Info Modals */
.modal-info-icon {
  position: relative;
  cursor: pointer;
	color: #303030;
	padding-left: 7px;

}

/* Active style for the icon */
.modal-info-icon.active {
  color: #000;
}
.modal-info-icon:hover .modal-tooltip {
  opacity: 1;
}
.info-modal {
  position: relative;
  z-index: 9999;
  background-color: #fff;
  border: 1px solid #ccc;
	border-radius: 6px;
  padding: 10px;
}
.info-modal h3 {
  font-size: 16px;
  margin-top: 0;
}
.info-modal p {
  margin-bottom: 10px;
	font-size: 12px;
}
.info-modal a {
  color: #000;
  text-decoration: underline;
}

Let me know your thoughts and ping me when you need help 🙂

If you do not have Voxel yet, you can support me by getting it through this link: Get Voxel

And check out my other Voxel related blog posts!

If you like my tutorials and snippets, and want to motivate me, or just say thanks,
feel free to support me by buying me a tea (as I do not drink coffee) :)

This website may contain affiliate links. If you click on a link and make a purchase, I may earn a small commission at no additional cost to you. This helps support the time and effort put into maintaining this website. I only recommend products and services I genuinely believe will be helpful to you. Thank you for your support!