<template id="doc-serialized">
	<h3>
        <?= __('Serialized Array Keys', 'codepress-admin-columns'); ?>
	</h3>
	<p>
        <?= __('Fill in the key(s) of the nested element that you want to display.', 'codepress-admin-columns'); ?>
	</p>
	<h4><?= __('Example') ?></h4>
	<p>
		<img src="<?= esc_url(
            $this->url . '/assets/images/tooltip/serialized-array.png'
        ) ?>" alt="Serialized Array" style="box-sizing: border-box; border:1px solid #ddd;padding: 8px 10px;max-width: 100%;margin: 5px 0;">
	</p>
	<p>
        <?= sprintf(
            __('Fill in %s', 'codepress-admin-columns'),
            sprintf('<span class="tooltip-serialized-array-input">%s</span>', 'sizes.medium')
        ); ?>
	</p>
	<p>
        <?= sprintf(
            __('Displayed value is %s', 'codepress-admin-columns'),
            sprintf('<span class="tooltip-serialized-array-result">%s</span>', 'image-200.jpg')
        ); ?>
	</p>
	<style>
		.tooltip-serialized-array-input {
			border: 1px solid #ccc;
			padding: 4px 10px;
			border-radius: 4px;
			margin-left: 4px;
			font-family: monospace;
			color: #4b4b4b;
		}

		.tooltip-serialized-array-result {
			font-weight: bold;
			font-family: monospace;
			color: #4b4b4b;
		}
	</style>
</template>