Support for Title Attributes

You can try something like this

<div class="form-group">
  <label title="ADD SOME TITLE HERE MAN" class="required" for="yourSubject">Subject</label>
  [text* your-subject id:yourSubject placeholder "Type your subject"]
</div>

Hi dnp_theme,

I don’t think your solution accomplishes what I was hoping to do.

That said, I’ve come up with a temporary fix that works (for advanced users). For those looking to implement jQuery’s Tooltip as part of your contact form, here’s what I did.

First, wrap your contact field in a span tag, with the title attribute of that span tag being what you would like the tooltip to say. You’ll also want to add a class to that span tag that makes it identifiable, like so:

<span class="tooltip" title="Please give us your first and last name.">[text* name placeholder "Your Name"]</span>

Next, insert the following code into your theme’s functions.php file:

function my_tooltip_scripts() {
	wp_enqueue_script( 'jquery-ui-tooltip' );
}
add_action( 'wp_enqueue_scripts', 'my_tooltip_scripts' );

Then, insert this bit of code into your theme’s scripts.js file (within the jQuery ready function):

$('span.tooltip').each(function() {

	var title = $(this).parents('.tooltip').first().attr('title');
	var input = $(this).find('input');
	$(input).attr('title', title);

});

$('span.tooltip input').tooltip();

Together, this will put the title attribute of the span tag on the input field(s) within it as well, which will make the tooltips work. It would be a lot easier if tooltips (or at least title attributes) were native to CF7.

Note: If any of this seems over your head, I work for a company that does WordPress web design. Feel free to hit us up for help (select Custom/Other from the package list, if you don’t want a full package).