• Set the tooltip background color, text color, and arrow color from the custom code
• Tooltip text set in the tooltip-1_button element's data-text attribute
• text-wrap: pretty; applied to tooltip-1_component so that button isn't on a line by itself

<style>
.tippy-box {
	background-color: white;
	color: black;
}
.tippy-arrow {
	color: white;
}
</style>
<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://unpkg.com/tippy.js@6"></script>
<script>
document.addEventListener("DOMContentLoaded", () => {
	document.querySelectorAll(".tooltip-1_button").forEach((component) => {
		if (component.hasAttribute("data-tooltip-1")) return;
		component.setAttribute("data-tooltip-1", "");
    
		const text = component.getAttribute("data-text");
		tippy(component, { content: text, arrow: true });
	});
});
</script>