dolibarr/htdocs/theme/eldy/tooltips.inc.css

.classfortooltiponclick .fa-question-circle {
	cursor: pointer;
}

/**
Used for tooltip freeze with alt keypress
this allow first child tooltip
**/
div.ui-tooltip.mytooltip-hover-tooltip {
	z-index: 999999;
	border: solid 1px #BBBBBB;
	padding: 10px 20px;
	border-radius: 0;
	box-shadow: 0 0 4px grey;
	margin: 2px;
	font-stretch: condensed;
	line-height: 1.6em;
	max-width: 550px;
}

:root{
	--tooltip-txt-color: #1f2937;
	--tooltip-bg-color:  #ffffff;
	--tooltip-border-color: #d1d5db;

	--tooltip-txt-color-dark-theme: #f9fafb;
	--tooltip-bg-color-dark-theme: #1f2937;
	--tooltip-border-color-dark-theme: #374151;
}

/* ********************** */
/* JQUERY TOOLTIPS  THEME */
/* ********************** */

/** Style tooltip Jquery */
div.ui-tooltip.jquery-tooltip {
	padding: 0.5rem 0.75rem;
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.5;
	font-family: InterVariable, system-ui, sans-serif;

	/* Same as light theme */
	color: var(--tooltip-txt-color);
	background-color:  var(--tooltip-bg-color);
	border: 1px solid var(--tooltip-border-color);

	/*backdrop-filter: blur(3px); */ /* useless if background as no opacity under 1 value */

	border-radius: 0.375rem;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
	pointer-events: none;
}


div.ui-tooltip.jquery-tooltip.--dark-mode {
	color: var(--tooltip-txt-color-dark-theme) !important;
	background-color:  var(--tooltip-bg-color-dark-theme) !important;
	border: 1px solid var(--tooltip-border-color-dark-theme);
}

div.ui-tooltip.jquery-tooltip.--light-mode {
	color: var(--tooltip-txt-color) !important;
	background-color:  var(--tooltip-bg-color) !important;
	border: 1px solid var(--tooltip-border-color);
}



/* ************************ */
/* Native CSS Only tooltips */
/* ************************ */

.dol-tooltip {
	--arrow-size: 6px;
	position: relative;
}

.dol-tooltip.--dark-mode {
	--tooltip-txt-color: var(--tooltip-txt-color-dark-theme);
	--tooltip-bg-color:  var(--tooltip-bg-color-dark-theme);
	--tooltip-border-color: var(--tooltip-border-color-dark-theme);
}

.dol-tooltip.--light-mode {
	--tooltip-txt-color: #1f2937;
	--tooltip-bg-color:  #ffffff;
	--tooltip-border-color: #d1d5db;
}


/* Base tooltip */
.dol-tooltip::after {
	content: attr(data-title);
	position: absolute;
	left: 50%;
	bottom: calc(100% + 0.5rem);
	transform: translateX(-50%) translateY(-5px);
	opacity: 0;
	visibility: hidden;
	min-height: 1.5em;
	white-space: nowrap;
	z-index: 1000;
	transition: opacity 120ms ease, transform 120ms ease;

	padding: 0.5rem 0.75rem;
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.5;
	font-family: InterVariable, system-ui, sans-serif;

	color: var(--tooltip-txt-color) !important;
	background-color: var(--tooltip-bg-color) !important;
	border: 1px solid var(--tooltip-border-color);

	border-radius: 0.375rem;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
	pointer-events: none;

	text-transform: none;
	text-align: left;

}


/* Arrow */
.dol-tooltip::before {
	z-index: 1;
	content: "";
	position: absolute;
	left: 50%;
	bottom: calc(100%) ;
	transform: translateX(-50%) translateY(0px);
	opacity: 0;
	visibility: hidden;
	transition: opacity 300ms ease, transform 300ms ease;
	filter: drop-shadow(0 2px 3px rgba(0,0,0,0.3));

	border-width: var(--arrow-size);
	border-style: solid;
	border-color: var(--tooltip-bg-color) transparent transparent transparent;
	pointer-events: none;
}


/* Define delay */
.dol-tooltip::after,
.dol-tooltip::before {
	transition-delay: 120ms; /* delay before visible */
}

.dol-tooltip:not(:hover)::after,
.dol-tooltip:not(:hover)::before {
	transition-delay: 0ms; /* instant off */
}


/* Display */
.dol-tooltip:hover::after,
.dol-tooltip:hover::before,
.dol-tooltip:focus-visible::after,
.dol-tooltip:focus-visible::before {
	opacity: 1;
	visibility: visible;
}

.dol-tooltip:hover::after,
.dol-tooltip:focus-visible::after {
	transform: translateX(-50%) translateY(calc(var(--arrow-size) / -2 ));
}

.dol-tooltip:hover::before,
.dol-tooltip:focus-visible::before {
	transform: translateX(-50%) translateY(0px);
}

/* Fallback aria-label if no data-title */
.dol-tooltip:not([data-title])::after {
	content: attr(aria-label);
}

/* RTL support */
body[dir="rtl"] .dol-tooltip::after {
	direction: rtl;
	text-align: right;
}

/* ------------------ */
/* Direction modifiers */
/* ------------------ */

/* Top (default already set) */
.dol-tooltip.--tooltip-top:hover::after{
	transform: translateX(-50%) translateY(calc(var(--arrow-size) / -2 ));
}
.dol-tooltip.--tooltip-top::after {
	bottom: calc(100% + 0.5rem);
	left: 50%;
	transform: translateX(-50%) translateY(0);
}

.dol-tooltip.--tooltip-top::before {
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%) translateY(0);
	border-color: var(--tooltip-bg-color) transparent transparent transparent;
}

/* Bottom */
.dol-tooltip.--tooltip-bottom:hover::after{
	transform: translateX(-50%) translateY(0);
}
.dol-tooltip.--tooltip-bottom::after {
	top: calc(100% + 0.5rem);
	left: 50%;
	bottom: auto;
	transform: translateX(-50%) translateY(5px);
}

.dol-tooltip.--tooltip-bottom::before {
	top: 100%;
	left: 50%;
	bottom: auto;
	transform: translateX(-50%) translateY(calc(var(--arrow-size) / -2 ));
	border-color: transparent transparent var(--tooltip-bg-color) transparent;
}

/* Left */
.dol-tooltip.--tooltip-left:hover::after{
	transform: translateX(calc(var(--arrow-size) / -2 )) translateY(-50%);
}
.dol-tooltip.--tooltip-left::after {
	right: calc(100% + 0.5rem);
	left: auto;
	top: 50%;
	transform: translateX(calc(-5px  - (var(--arrow-size) / 2 ))) translateY(-50%);
}

.dol-tooltip.--tooltip-left::before {
	right: 100%;
	left: auto;
	top: 50%;
	transform: translateX(0) translateY(-50%);
	border-color: transparent transparent transparent var(--tooltip-bg-color);
}

/* Right */

.dol-tooltip.--tooltip-right:hover::after{
	transform: translateX(calc(var(--arrow-size) / 2 )) translateY(-50%);
}
.dol-tooltip.--tooltip-right::after {
	left: calc(100% + 0.5rem);
	right: auto;
	top: 50%;
	transform: translateX(calc(5px + (var(--arrow-size) / 2 ))) translateY(-50%);
}

.dol-tooltip.--tooltip-right::before {
	left: 100%;
	right: auto;
	top: 50%;
	transform: translateX(0) translateY(-50%);
	border-color: transparent var(--tooltip-bg-color) transparent transparent;
}