CF7 File Upload Field with styling and Bootstrap 4 tooltip

form.php

			<div class="file-upload-field">
        
				<label class="form-label" for="form-attachment">
          
					<h4 class="form-titles">Attachments <span class="form-optional">(optional)</span></h4>
          
					<span class="font-italic form-file-spec">(.zip, .jpg or .png - max 20MB)</span>
          
					<div class="solid-btn-tiny solid-btn-alt mt-1 file-btn"
					  data-toggle="tooltip"
				  	data-placement="bottom"
				  	title="Click here to choose a file">
     
						<i class="fa fa-cloud-upload"></i> 
            
						Choose File...
            
					</div>
          
				</label>
				
				[file file-608 id:form-attachment limit:20000000 filetypes:zip|jpg|png] 
        
			</div>

scripts.js

	// ------------------------------------- \ 
	//			MARK: Enable Bootstrap ToolTips
	// ------------------------------------- / 

	$('[data-toggle="tooltip"]').tooltip();


	// ------------------------------------- \ 
	//			MARK: Uploaded File Text
	// ------------------------------------- / 

	$('.file-upload-field').each(function () {
		
		var thisUploadField = $(this);
		var uploadBtnInitialValue = $(thisUploadField).find('.file-btn').html();		
		var toolTipOriginalTitle = $(thisUploadField).find('.file-btn').attr('data-original-title');	

		$(this).find('.wpcf7-file').on('change', function () {

			var fileName = $(this).val();
			var fileNameClean = fileName.replace(/^.*\\/, "");
			var fileNameShort = fileNameClean.slice(-14);
			var fileButton = $(thisUploadField).find('.file-btn');
			// var thisval = $(this).val();


			if (fileNameClean.length > 14) {
				$(fileButton).html('...' + fileNameShort);
			}
			else {
				$(fileButton).html(fileNameShort);				
			}
			
			$('[data-toggle="tooltip"]').tooltip('dispose');		
			$(fileButton).attr('title', fileNameClean).tooltip('show');			

			$(fileButton).attr('title', fileNameClean).addClass('solid-btn-active-purple');			

			if( !$(this).val() ) {
				// alert(uploadBtnInitialValue);
				$('[data-toggle="tooltip"]').tooltip('dispose');		
									
				$(fileButton)
					.html(uploadBtnInitialValue)
					.removeClass('solid-btn-active-purple')
					.attr('title', toolTipOriginalTitle )
					.tooltip('show');
			}

		});
		
	});

style.css

.wpcf7 input[type="file"] {
	cursor: pointer;
	background: transparent !important;
	border: none !important;
	padding-left: 0;
}

.wpcf7-file {
	cursor: pointer;
	padding-left: 0;
	width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
}