@alegendstale/holly-components/dist/components/tool-tip/tool-tip.styles.js

Reusable UI components created using lit

import { css as t } from "lit";
const i = t`
	:host {
		display: block;
		position: relative;
		--tooltip-x: 0;
		--tooltip-y: 0;
	}

	/* Manual or Click appear when display is true */
	:host(:not([trigger='hover'])[display]) p {
		display: flex;
	}

	/* Hover appears when display is true and user is hovering */
	:host([trigger='hover'][display]:hover) p {
		display: flex;
	}

	/* Display nothing when there is no text */
	:host([text='']) #tip {
		display: none;
	}

	p {
		display: none;
		align-items: center;
		justify-content: center;

		position: absolute;
		background: #000000c0;
		width: max-content;
		min-width: 100px;
		height: 40px;
		text-align: center;
		vertical-align: middle;
		font-size: 18px;
		font-weight: var(--font-medium);
		color: #fafafa;
		padding: 0;
		margin: 0;
		transform: translateX(-50%);

		left: var(--tooltip-x);
		top: var(--tooltip-y);

		/* Obsidian Styling */
		box-sizing: border-box;
		animation: pop-down 200ms forwards ease-in-out;
		box-shadow: 0 2px 8px var(--background-modifier-box-shadow);
		border-radius: var(--radius-s);
		line-height: var(--line-height-tight);
		z-index: var(--layer-tooltip);
		pointer-events: none;
		word-break: normal;
		overflow-wrap: anywhere;
	}
`;
export {
  i as default
};