.sigma-tooltip { max-width: 300px; max-height: 280px; background-color: rgb(249, 247, 237); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); border-radius: 6px; } .sigma-tooltip-header { font-variant: small-caps; font-size: 120%; color: #437356; border-bottom: 1px solid #aac789; padding: 10px; } .sigma-tooltip-body { padding: 10px; } .sigma-tooltip-body th { color: #999; text-align: left; } .sigma-tooltip-footer { padding: 10px; border-top: 1px solid #aac789; } .sigma-tooltip > .arrow { border-width: 10px; position: absolute; display: block; width: 0; height: 0; border-color: transparent; border-style: solid; } .sigma-tooltip.top { margin-top: -12px; } .sigma-tooltip.top > .arrow { left: 50%; bottom: -10px; margin-left: -10px; border-top-color: rgb(249, 247, 237); border-bottom-width: 0; } .sigma-tooltip.bottom { margin-top: 12px; } .sigma-tooltip.bottom > .arrow { left: 50%; top: -10px; margin-left: -10px; border-bottom-color: rgb(249, 247, 237); border-top-width: 0; } .sigma-tooltip.left { margin-left: -12px; } .sigma-tooltip.left > .arrow { top: 50%; right: -10px; margin-top: -10px; border-left-color: rgb(249, 247, 237); border-right-width: 0; } .sigma-tooltip.right { margin-left: 12px; } .sigma-tooltip.right > .arrow { top: 50%; left: -10px; margin-top: -10px; border-right-color: rgb(249, 247, 237); border-left-width: 0; } .new-tooltip { z-index: 29; max-height: 400px; display: inline-block; background-color: rgba(255, 255, 255, .95); border-radius: 12px; position: absolute; top: 100px; left: 20px; border: 0px solid #000000; box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.2); } .new-tooltip div.header { text-align: center; border-bottom: 1px solid black; font-weight: bold; font-size: 20px; padding: 5px 10px; } .new-tooltip ul { list-style: none; margin: 0; padding: 0; padding-top: 5px; white-space: nowrap; } .new-tooltip ul li { padding: 8px 20px; border-bottom: 1px solid #ecf0f1; } .new-tooltip ul li:hover { background-color: #ecf0f1; cursor: pointer; } .new-tooltip ul li:last-child { border-radius: 0 0 12px 12px; }