github.com/pyroscope-io/pyroscope@v0.37.3-0.20230725203016-5f6947968bd0/packages/pyroscope-flamegraph/src/Tooltip/Tooltip.module.scss (about) 1 .tooltip { 2 width: 420px; 3 position: fixed; 4 background: var(--ps-tooltip-bg); 5 box-shadow: 1px 2px 4px 0px rgba(0, 0, 0, 0.3); 6 border-radius: 4px; 7 color: var(--ps-tooltip-text); 8 font-size: 12px; 9 visibility: hidden; 10 z-index: 2; 11 pointer-events: none; 12 13 &.flamegraphDiffTooltip { 14 width: 450px; 15 } 16 17 .tooltipName { 18 color: var(--ps-tooltip-text); 19 background-color: var(--ps-tooltip-header-bg); 20 border-top-right-radius: 4px; 21 border-top-left-radius: 4px; 22 font-weight: bold; 23 white-space: nowrap; 24 overflow: hidden; 25 text-overflow: ellipsis; 26 padding: 8px 10px; 27 font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace; 28 } 29 30 .functionName { 31 padding: 8px 10px 0; 32 font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace; 33 34 white-space: break-spaces; 35 word-break: break-all; 36 } 37 38 .tooltipTable { 39 width: calc(100% - 10px * 2); 40 margin: 10px; 41 display: table; /* although this is the default, users may have an overwrite */ 42 43 th, 44 td { 45 background-color: var(--ps-tooltip-bg); 46 border: 1px solid var(--ps-tooltip-header-bg); 47 padding: 5px; 48 font-weight: normal; 49 } 50 } 51 52 .clickInfo { 53 margin-bottom: 10px; 54 display: flex; 55 justify-content: center; 56 color: var(--ps-right-click-info); 57 58 svg { 59 color: initial; 60 display: block; 61 align-self: center; 62 width: 22px; 63 height: 22px; 64 margin-right: 5px; 65 } 66 67 span { 68 font-size: 14px; 69 } 70 } 71 }