@financial-times/o3-tooltip
Version:
Provides a viewport-aware tooltip for annotating or or highlighting other aspects of a product's UI
13 lines (10 loc) • 1.95 kB
CSS
@import "@financial-times/o3-foundation/css/core.css";
@import "./main.css";
/* src/css/tokens/core/o3-tooltip/_variables.css */
[data-o3-brand=core] .o3-tooltip {
--_o3-tooltip-icon-info: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4ZM2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12Z' fill='black'/%3E%3Cpath d='M13.2948 10.012V17.376H10.7188V10.012H13.2948ZM10.5508 7.99602C10.5508 7.58536 10.6908 7.25402 10.9708 7.00202C11.2601 6.75002 11.6008 6.62402 11.9928 6.62402C12.3941 6.62402 12.7348 6.75002 13.0148 7.00202C13.3041 7.25402 13.4488 7.58536 13.4488 7.99602C13.4488 8.40669 13.3041 8.74269 13.0148 9.00402C12.7348 9.25602 12.3941 9.38202 11.9928 9.38202C11.6008 9.38202 11.2601 9.25602 10.9708 9.00402C10.6908 8.74269 10.5508 8.40669 10.5508 7.99602Z' fill='black'/%3E%3C/svg%3E");
--_o3-tooltip-icon-cross: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4ZM2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12Z' fill='black'/%3E%3Cpath d='M10.3257 12.003L7.17969 8.90103L8.87369 7.20703L11.9977 10.309L15.0997 7.20703L16.7937 8.90103L13.6917 12.003L16.7937 15.127L15.0997 16.821L11.9977 13.719L8.87369 16.821L7.17969 15.127L10.3257 12.003Z' fill='black'/%3E%3C/svg%3E");
--_o3-tooltip-background-color: var(--o3-color-palette-white);
--_o3-tooltip-text-color: var(--o3-color-palette-black-90);
}
/* src/css/brands/core.css */