{"size": 1159, "ext": "js", "max_stars_repo_path": "ui-tests/tests/vwc-tooltip/index.js", "max_stars_repo_name": "Vonage/vivid", "max_stars_repo_stars_event_min_datetime": "2021-10-12T20:08:24.000Z", "max_stars_repo_stars_event_max_datetime": "2022-02-24T03:09:17.000Z", "max_issues_repo_path": "ui-tests/tests/vwc-tooltip/index.js", "max_issues_repo_name": "Vonage/vivid", "max_issues_repo_issues_event_min_datetime": "2021-09-25T18:49:17.000Z", "max_issues_repo_issues_event_max_datetime": "2022-03-30T20:04:04.000Z", "max_forks_repo_path": "ui-tests/tests/vwc-tooltip/index.js", "max_forks_repo_name": "Vonage/vivid", "max_forks_repo_forks_event_min_datetime": "2021-12-12T03:10:15.000Z", "max_forks_repo_forks_event_max_datetime": "2022-03-04T07:22:04.000Z"}
{"max_stars_count": 11, "max_issues_count": 202, "max_forks_count": 2, "avg_line_length": 30.5, "max_line_length": 174, "alphanum_fraction": 0.7169974116}
import '@vonage/vwc-tooltip';
import '@vonage/vwc-button';
import '@vonage/vwc-icon-button';

export async function createElementVariations(wrapper) {
	const textElementWrapper = document.createElement('div');
	textElementWrapper.innerHTML = `
		<style>
			.tooltip-wrapper {
				height: 600px;
				width: 600px;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		</style>
		<div class="tooltip-wrapper">
			<vwc-icon-button icon="info-line"  shape="circled" aria-describedby="tooltip" aria-haspopup="true" id="button"></vwc-icon-button>
			<vwc-tooltip open icon="info-line" text="I'm the tooltip content" dismissible style="--tooltip-inline-size:300px;" id="tooltip" corner="top" anchor="button"></vwc-tooltip>
		</div>`;

	wrapper.appendChild(textElementWrapper);
	const button = document.getElementById("button");
	button.addEventListener("click", onClick);
	const tooltip = document.getElementById('tooltip');
	await tooltip.updateComplete;
	return tooltip.updateComplete;
}

function onClick() {
	const tooltip = document.querySelector('vwc-tooltip');
	if (tooltip.open) {
		tooltip.hide();
	} else {
		tooltip.show();
	}
}
