[Forminator Pro] - Show field descriptions as tooltips

wpmudev-forminator-field-descriptions-tooltip.php

<?php
/**
* Plugin Name: [Forminator Pro] - Show field descriptions as tooltips
* Plugin URI: https://premium.wpmudev.org/
* Description: Replace existing field descriptions and show them as tooltips with tippy.js (as of 1.12.1)
* Author: Alessandro Kaounas @ WPMUDEV
* Author URI: https://premium.wpmudev.org/
* Task: https://wordpress.org/support/topic/show-the-field-description-as-a-tooltip/
* License: GPLv2 or later
*/

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

// No need to do anything if the request is via WP-CLI.
if ( defined( 'WP_CLI' ) && WP_CLI ) {
	return;
}

if ( ! class_exists( 'WPMUDEV_Forminator_Field_Descriptions_Tooltip' ) ) {
    
    class WPMUDEV_Forminator_Field_Descriptions_Tooltip {

        private static $_instance = null;

        public static function get_instance() {

            if( is_null( self::$_instance ) ){
                self::$_instance = new WPMUDEV_Forminator_Field_Descriptions_Tooltip();
            }

            return self::$_instance;
            
        }

        private function __construct() {

            $this->init();

        }

        public function init(){
        
            add_filter( 'forminator_field_markup', array( $this, 'wpmudev_forminator_field_markup' ), 10, 2 );
            add_action( 'wp_footer', array( $this, 'wpmudev_forminator_tooltip_assets' ), 99 );

        }

        public function wpmudev_forminator_field_markup( $html, $field ){

            if( isset( $field['description'] ) && $field['type'] === 'phone' ){
                
                $field_id = 'forminator-field-' . $field['element_id'];
                $description = $field['description'];
                
                $markup = sprintf(
                    '<span class="forminator-description">%s</span>',
                    esc_html( $description )
                );
                
                $html = str_replace( $markup, '', $html );
                $html = str_replace( 'id="' . $field_id . '"', 'id="' . $field_id . '" data-tippy-content="' . esc_html( $description ) . '" ', $html );
        
                return $html;
            }
        
            if( isset( $field['description'] ) && $field['type'] === 'textarea' ){
                
                $field_id = 'forminator-field-' . $field['element_id'];
                $description = $field['description'];
                
                $markup = sprintf(
                    '<span class="forminator-description">%s',
                    esc_html( $description )
                );
        
                $html = str_replace( $markup, '<span class="forminator-description">', $html );
                $html = str_replace( 'id="' . $field_id . '"', 'id="' . $field_id . '" data-tippy-content="' . esc_html( $description ) . '" ', $html );
                
                return $html;
        
            }
        
            if( isset( $field['description'] ) ){
                
                $field_id = 'forminator-field-' . $field['element_id'];
                $description = $field['description'];
                
                $markup = sprintf(
                    '<span class="forminator-description" aria-describedby="%s">%s</span>',
                    $field_id,
                    esc_html( $description )
                );
                
                $html = str_replace( $markup, '', $html );
                $html = str_replace( 'id="' . $field_id . '"', 'id="' . $field_id . '" data-tippy-content="' . esc_html( $description ) . '" ', $html );
        
                return $html;
            }
        
            if( isset( $field['fname'] ) && $field['fname'] ){
                
                $field_id = 'forminator-field-first-' . $field['element_id'];
                $description = $field['fname_description'];
                
                $markup = sprintf(
                    '<span class="forminator-description" aria-describedby="%s">%s</span>',
                    $field_id,
                    esc_html( $description )
                );
                
                $html = str_replace( $markup, '', $html );
                $html = str_replace( 'id="' . $field_id . '"', 'id="' . $field_id . '" data-tippy-content="' . esc_html( $description ) . '" ', $html );
        
            }
        
            if( isset( $field['mname'] ) && $field['mname'] ){
                
                $field_id = 'forminator-field-middle-' . $field['element_id'];
                $description = $field['mname_description'];
                
                $markup = sprintf(
                    '<span class="forminator-description" aria-describedby="%s">%s</span>',
                    $field_id,
                    esc_html( $description )
                );
                
                $html = str_replace( $markup, '', $html );
                $html = str_replace( 'id="' . $field_id . '"', 'id="' . $field_id . '" data-tippy-content="' . esc_html( $description ) . '" ', $html );
        
            }
        
            if( isset( $field['lname'] ) && $field['lname'] ){
                
                $field_id = 'forminator-field-last-' . $field['element_id'];
                $description = $field['lname_description'];
                
                $markup = sprintf(
                    '<span class="forminator-description" aria-describedby="%s">%s</span>',
                    $field_id,
                    esc_html( $description )
                );
                
                $html = str_replace( $markup, '', $html );
                $html = str_replace( 'id="' . $field_id . '"', 'id="' . $field_id . '" data-tippy-content="' . esc_html( $description ) . '" ', $html );
        
            }
        
            return $html;
        
        }

        public function wpmudev_forminator_tooltip_assets(){ ?>

            <link rel="stylesheet" href="https://unpkg.com/tippy.js@6/animations/scale.css"/>
            <script src="https://unpkg.com/@popperjs/core@2/dist/umd/popper.min.js"></script>
            <script src="https://unpkg.com/tippy.js@6/dist/tippy-bundle.umd.js"></script>
            
            <script type="text/javascript">
            (function($){
                tippy(
                    // Selector
                    'input[data-tippy-content], textarea[data-tippy-content]',
                    // Settings
                    {
                        arrow: false,
                        trigger: 'focus',
                        animation: 'fade'
                    }
                );
            })(jQuery);
            </script>

            <?php 
        }
		
    }

    add_action( 'plugins_loaded', function(){
        return WPMUDEV_Forminator_Field_Descriptions_Tooltip::get_instance();
    });

}