@gravityforms/components/css/admin/tooltip.css

UI components for use in Gravity Forms development. Both React and vanilla js flavors.

.gform-admin {

	.gform-tooltip {
		--gform-admin-tooltip-offset: 14px;

		display: inline-block;
		position: relative;
	}

	.gform-tooltip__trigger {
		align-items: center;
		border: 0;
		border-radius: 50%;
		cursor: pointer;
		display: flex;
		font-size: 0.625rem;
		height: 1rem;
		justify-content: center;
		margin: 0;
		outline: 0.125rem solid transparent;
		padding: 0;
		transition: var(--gform-admin-transition-hover);
		width: 1rem;

		&:hover,
		&:focus {
			box-shadow: var(--gform-admin-box-shadow-button);
		}
	}

	.gform-tooltip--has-trigger-children .gform-tooltip__trigger {
		height: auto;
		width: auto;
	}

	.gform-tooltip--type-unstyled .gform-tooltip__trigger {
		background: transparent;
		border: 0;
		box-shadow: none;
		color: inherit;
		font-size: inherit;
	}

	.gform-tooltip--type-default .gform-tooltip__trigger {
		background: var(--gform-admin-color-white-lilac);
		border: 1px solid var(--gform-admin-color-white-lilac);
		color: var(--gform-admin-color-port);

		&:hover,
		&:focus {
			background-color: var(--gform-admin-color-snuff);
			border-color: var(--gform-admin-color-amethyst-smoke);
		}

		&:focus {
			border-color: var(--gform-admin-color-chathams);
			outline: 0.125rem solid var(--gform-admin-color-focus);
		}
	}

	.gform-tooltip--type-success .gform-tooltip__trigger {
		background: var(--gform-admin-color-tara);
		border: 1px solid var(--gform-admin-color-tara);
		color: var(--gform-admin-color-green);

		&:hover,
		&:focus {
			border-color: var(--gform-admin-color-green);
		}

		&:focus {
			background: var(--gform-admin-color-light-green);
			outline: 0.125rem solid var(--gform-admin-color-tara);
		}
	}

	.gform-tooltip--type-error .gform-tooltip__trigger {
		background: var(--gform-admin-color-background-red);
		border: 1px solid var(--gform-admin-color-background-red);
		color: var(--gform-admin-color-red);

		&:hover,
		&:focus {
			border-color: var(--gform-admin-color-red);
		}

		&:focus {
			background: var(--gform-admin-color-white);
			outline: 0.125rem solid var(--gform-admin-color-background-red);
		}
	}

	.gform-tooltip__tooltip {
		border-radius: 0.1875rem;
		box-shadow: var(--gform-admin-box-shadow-mega);
		box-sizing: border-box;
		font-family: var(--gform-admin-font-family-base);
		font-size: var(--gform-admin-font-size-base-old);
		line-height: 1.385;
		padding: 0.5rem 0.75rem;
		position: fixed;
		visibility: hidden;

		* {
			color: var(--gform-admin-color-white);
		}
	}

	.gform-tooltip__tooltip-arrow {
		position: absolute;
		z-index: -1;

		&::after {
			border-radius: 0.25rem;
			content: "";
			display: block;
			height: 1.125rem;
			transform: rotate(45deg);
			width: 1.125rem;
		}
	}

	.gform-tooltip--theme-chathams {

		.gform-tooltip__tooltip,
		.gform-tooltip__tooltip-arrow::after {
			background: var(--gform-admin-color-chathams);
		}
	}

	.gform-tooltip--theme-port {

		.gform-tooltip__tooltip,
		.gform-tooltip__tooltip-arrow::after {
			background: var(--gform-admin-color-port);
		}
	}

	.gform-tooltip--position-top {

		.gform-tooltip__tooltip {
			left: 50%;
			top: 0;
			transform: translate(-50%, calc(-100% - var(--gform-admin-tooltip-offset)));
		}

		.gform-tooltip__tooltip-arrow {
			bottom: -0.4375rem;
			left: 50%;
			transform: scaleY(0.8) translateX(-50%);
		}
	}

	.gform-tooltip--position-bottom {

		.gform-tooltip__tooltip {
			bottom: 0;
			left: 50%;
			transform: translate(-50%, calc(100% + var(--gform-admin-tooltip-offset)));
		}

		.gform-tooltip__tooltip-arrow {
			left: 50%;
			top: -0.4375rem;
			transform: scaleY(0.8) translateX(-50%);
		}
	}

	.gform-tooltip--position-left {

		.gform-tooltip__tooltip {
			left: 0;
			top: 50%;
			transform: translate(calc(-100% - var(--gform-admin-tooltip-offset)), -50%);
		}

		.gform-tooltip__tooltip-arrow {
			right: -0.4375rem;
			top: 50%;
			transform: rotate(90deg) scaleY(0.8) translateX(-50%);
		}
	}

	.gform-tooltip--position-right {

		.gform-tooltip__tooltip {
			right: 0;
			top: 50%;
			transform: translate(calc(100% + var(--gform-admin-tooltip-offset)), -50%);
		}

		.gform-tooltip__tooltip-arrow {
			left: -0.4375rem;
			top: 50%;
			transform: rotate(90deg) scaleY(0.8) translateX(-50%);
		}
	}

	.gform-tooltip--initialized .gform-tooltip__tooltip {
		display: none;
		opacity: 0;
		position: absolute;
		transition: var(--gform-admin-transition-dropdown);
		z-index: 5;
	}

	.gform-tooltip--anim-in-ready .gform-tooltip__tooltip {
		display: block;
		visibility: visible;
	}

	.gform-tooltip--anim-in-active .gform-tooltip__tooltip {
		opacity: 1;
	}

	.gform-tooltip__tooltip-content {
		margin: 0;
	}
}