gitea_admin/Styleguide
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add generic tooltip component

Browse Source
This commit is contained in:
gitea_admin committed 2026-09-21 14:24:15 +02:00
1 parent 71734d6c1d
commit 5b86185cae
5 files changed
+277
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

styles/01-foundations.css
+4
View File
@@ -62,6 +62,7 @@
--surface-menu-panel-portal: var(--color-light-grey);
--surface-help-icon: var(--color-medium-grey);
--surface-help-panel: var(--color-light-grey);
--surface-tooltip: var(--color-light-grey);
--surface-pulldown-panel: var(--color-light-grey);
--surface-activatable-remove: var(--surface-control-default);
--surface-slider-track: var(--color-medium-grey);
@@ -89,6 +90,8 @@
--layout-mode-toggle-local-width-factor: 3;
--layout-mode-toggle-width: calc(var(--interaction-height) * 3.5);
--layout-help-panel-width: calc(var(--interaction-height) * 8);
--layout-tooltip-width: calc(var(--interaction-height) * 8);
--radius-tooltip: var(--radius-interaction);
--text-control-default: var(--color-font-dark);
--text-control-disabled: var(--color-dark-grey);
--text-button-process: var(--color-font-light);
@@ -98,6 +101,7 @@
--text-menu-link-portal: var(--color-font-dark);
--text-help-icon: var(--color-font-dark);
--text-help-panel: var(--color-font-dark);
--text-tooltip: var(--color-font-dark);
--text-activatable-remove: var(--text-control-default);
--text-hyperlink: var(--color-font-hyperlink);
--icon-pulldown-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M2 2l4 4 4-4' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E");
styles/10-components-interactive-elements.css
+89
View File
@@ -1239,6 +1239,95 @@
right: 0;
}
.sg-tooltip-wrap {
position: relative;
display: inline-flex;
vertical-align: middle;
}
.sg-tooltip-panel {
position: absolute;
z-index: var(--layer-pulldown-panel);
display: block;
width: var(--layout-tooltip-width);
max-width: calc(100vw - (2 * var(--spacing-large)));
box-sizing: border-box;
overflow-wrap: anywhere;
padding: var(--spacing-large);
border-radius: var(--radius-tooltip);
color: var(--text-tooltip);
background: var(--surface-tooltip);
box-shadow: var(--shadow-overlay);
}
.sg-tooltip-panel[hidden] {
display: none;
}
.sg-tooltip-wrap[data-tooltip-placement="bottom"] .sg-tooltip-panel {
top: calc(100% + var(--spacing-small));
left: 50%;
transform: translateX(-50%);
}
.sg-tooltip-wrap[data-tooltip-placement="top"] .sg-tooltip-panel {
bottom: calc(100% + var(--spacing-small));
left: 50%;
transform: translateX(-50%);
}
.sg-tooltip-wrap[data-tooltip-placement="left"] .sg-tooltip-panel {
top: 50%;
right: calc(100% + var(--spacing-small));
transform: translateY(-50%);
}
.sg-tooltip-wrap[data-tooltip-placement="right"] .sg-tooltip-panel {
top: 50%;
left: calc(100% + var(--spacing-small));
transform: translateY(-50%);
}
.sg-tooltip-panel::before {
position: absolute;
width: 0;
height: 0;
border-style: solid;
content: "";
}
.sg-tooltip-wrap[data-tooltip-placement="bottom"] .sg-tooltip-panel::before {
top: calc(var(--spacing-small) / -2);
left: 50%;
border-width: 0 calc(var(--spacing-small) / 2) calc(var(--spacing-small) / 2);
border-color: transparent transparent var(--surface-tooltip);
transform: translateX(-50%);
}
.sg-tooltip-wrap[data-tooltip-placement="top"] .sg-tooltip-panel::before {
bottom: calc(var(--spacing-small) / -2);
left: 50%;
border-width: calc(var(--spacing-small) / 2) calc(var(--spacing-small) / 2) 0;
border-color: var(--surface-tooltip) transparent transparent;
transform: translateX(-50%);
}
.sg-tooltip-wrap[data-tooltip-placement="left"] .sg-tooltip-panel::before {
top: 50%;
right: calc(var(--spacing-small) / -2);
border-width: calc(var(--spacing-small) / 2) 0 calc(var(--spacing-small) / 2) calc(var(--spacing-small) / 2);
border-color: transparent transparent transparent var(--surface-tooltip);
transform: translateY(-50%);
}
.sg-tooltip-wrap[data-tooltip-placement="right"] .sg-tooltip-panel::before {
top: 50%;
left: calc(var(--spacing-small) / -2);
border-width: calc(var(--spacing-small) / 2) calc(var(--spacing-small) / 2) calc(var(--spacing-small) / 2) 0;
border-color: transparent var(--surface-tooltip) transparent transparent;
transform: translateY(-50%);
}
.sg-pulldown-panel {
position: absolute;
top: calc(100% + var(--spacing-small));