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.
// 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');
});
});
<script src="/wp-content/themes/voxel-child/js/bio-modal.js"></script>
/* 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!