Add Info Icon/Box Besides Form Labels In Voxel Child

• First you need to create a “bio-modal.js” file in the 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 🙂