wpseek.com
A WordPress-centric search engine for devs and theme authors



wp_get_tooltip_helper › WordPress Function

Since7.1.0
Deprecatedn/a
wp_get_tooltip_helper ( $content, $args = array() )
Parameters: (2)
  • (string) $content Plain-text tooltip content. An empty value returns an empty string.
    Required: Yes
  • (array) $args { Optional. Arguments for building the tooltip. @type string $id Unique ID for the popover element. Default is a generated unique ID. @type string $label Accessible label for the toggle button. Default 'Help', matching the default icon. Ignored for tooltips. @type string $close_label Accessible label for the close button. Default 'Close'. @type string $icon Dashicons icon class for the toggle button. Default 'dashicons-editor-help'. Should match the control's visible label. @type string $class Additional class(es) for the wrapping element. Default empty. @type string $type Type of tooltip: either `tooltip` or `toggletip`. Default 'tooltip'. }
    Required: No
    Default: array()
Returns:
  • (string) Tooltip HTML markup, or an empty string when no content is provided.
Defined at:
Codex:

Retrieves the markup for an accessible tooltip or toggletip.

Returns a button and either a hover/focus triggered tooltip popover or an action triggered toggle tip. Enqueue the wp-tooltip style and script where it is used. Tooltips are used to show the accessible name of a control. Toggletips are be used for longer supporting text explaining context.


Source

function wp_get_tooltip_helper( $content, $args = array() ) {
	$content = trim( (string) $content );

	if ( '' === $content ) {
		return '';
	}

	$defaults = array(
		'id'          => '',
		'label'       => __( 'Help' ),
		'close_label' => __( 'Close' ),
		'icon'        => 'dashicons-editor-help',
		'class'       => '',
		'type'        => 'tooltip',
		'attributes'  => array(),
	);

	$args = wp_parse_args( $args, $defaults );

	$id = '' !== $args['id'] ? $args['id'] : wp_unique_id( 'wp-tooltip-' );

	$classes = ( 'tooltip' === $args['type'] ) ? 'wp-tooltip wp-is-tooltip' : 'wp-tooltip wp-is-toggletip';
	if ( '' !== $args['class'] ) {
		$classes .= ' ' . $args['class'];
	}

	$icon = '' !== $args['icon'] ? ' ' . $args['icon'] : '';

	if ( 'tooltip' === $args['type'] ) {
		// Tooltips are only used to visually display labels.
		$label  = wp_strip_all_tags( $content, true );
		$markup = sprintf(
			'<div class="%1$s">' .
				'<button type="button" class="wp-tooltip__toggle" popovertarget="%2$s" aria-label="%3$s">' .
					'<span class="dashicons%4$s" aria-hidden="true"></span>' .
				'</button>' .
				'<span popover="hint" id="%2$s" class="wp-tooltip__bubble" role="tooltip">' .
					'<span id="%2$s-text" class="wp-tooltip__text">%5$s</span>' .
				'</span>' .
			'</div>',
			esc_attr( $classes ),
			esc_attr( $id ),
			esc_attr( $label ),
			esc_attr( $icon ),
			esc_html( $content ),
		);
	} else {
		$markup = sprintf(
			'<div class="%1$s">' .
				'<button type="button" class="wp-tooltip__toggle" popovertarget="%2$s" aria-label="%3$s" aria-haspopup="dialog">' .
					'<span class="dashicons%4$s" aria-hidden="true"></span>' .
				'</button>' .
				'<dialog popover="auto" id="%2$s" class="wp-tooltip__bubble" autofocus>' .
					'<span id="%2$s-text" class="wp-tooltip__text">%5$s</span>' .
					'<button type="button" class="wp-tooltip__close" popovertarget="%2$s" popovertargetaction="hide" aria-label="%6$s">' .
						'<span class="dashicons dashicons-no-alt" aria-hidden="true"></span>' .
					'</button>' .
				'</dialog>' .
			'</div>',
			esc_attr( $classes ),
			esc_attr( $id ),
			esc_attr( $args['label'] ),
			esc_attr( $icon ),
			esc_html( $content ),
			esc_attr( $args['close_label'] ),
		);
	}

	return $markup;
}