.tooltip { position: absolute; z-index: 1030; display: block; padding: 5px; font-size: 11px; opacity: 0; visibility: visible; } .tooltip.in { opacity: 0.8; } .tooltip.top { margin-top: -3px; } .tooltip.right { margin-left: 3px; } .tooltip.bottom { margin-top: 3px; } .tooltip.left { margin-left: -3px; } .tooltip-inner { max-width: 200px; padding: 3px 8px; color: #ffffff; text-align: center; text-decoration: none; background-color: #000000; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .tooltip-arrow { position: absolute; width: 0; height: 0; border-color: transparent; border-style: solid; } .tooltip.top .tooltip-arrow { bottom: 0; left: 50%; margin-left: -5px; border-top-color: #000000; border-width: 5px 5px 0; } .tooltip.right .tooltip-arrow { top: 50%; left: 0; margin-top: -5px; border-right-color: #000000; border-width: 5px 5px 5px 0; } .tooltip.left .tooltip-arrow { top: 50%; right: 0; margin-top: -5px; border-left-color: #000000; border-width: 5px 0 5px 5px; } .tooltip.bottom .tooltip-arrow { top: 0; left: 50%; margin-left: -5px; border-bottom-color: #000000; border-width: 0 5px 5px; } .popover { position: absolute; top: 0; left: 0; z-index: 1010; display: none; width: 236px; padding: 1px; background-color: #ffffff; border: 1px solid #ccc; border: 1px solid rgba(0, 0, 0, 0.2); -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; } .popover.top { margin-bottom: 10px; } .popover.right { margin-left: 10px; } .popover.bottom { margin-top: 10px; } .popover.left { margin-right: 10px; } .popover-title { padding: 8px 14px; margin: 0; font-size: 14px; font-weight: normal; line-height: 18px; background-color: #f7f7f7; border-bottom: 1px solid #ebebeb; -webkit-border-radius: 5px 5px 0 0; -moz-border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0; } .popover-content { padding: 9px 14px; } .popover-content p, .popover-content ul, .popover-content ol { margin-bottom: 0; } .popover .arrow, .popover .arrow:after { position: absolute; display: inline-block; width: 0; height: 0; border-color: transparent; border-style: solid; } .popover .arrow:after { z-index: -1; content: ""; } .popover.top .arrow { bottom: -10px; left: 50%; margin-left: -10px; border-top-color: #ffffff; border-width: 10px 10px 0; } .popover.top .arrow:after { bottom: -1px; left: -11px; border-top-color: rgba(0, 0, 0, 0.25); border-width: 11px 11px 0; } .popover.right .arrow { top: 50%; left: -10px; margin-top: -10px; border-right-color: #ffffff; border-width: 10px 10px 10px 0; } .popover.right .arrow:after { bottom: -11px; left: -1px; border-right-color: rgba(0, 0, 0, 0.25); border-width: 11px 11px 11px 0; } .popover.bottom .arrow { top: -10px; left: 50%; margin-left: -10px; border-bottom-color: #ffffff; border-width: 0 10px 10px; } .popover.bottom .arrow:after { top: -1px; left: -11px; margin-left: 0; border-bottom-color: rgba(0, 0, 0, 0.25); border-width: 0 11px 11px; } .popover.left .arrow { top: 50%; right: -10px; margin-top: -10px; border-left-color: #ffffff; border-width: 10px 0 10px 10px; } .popover.left .arrow:after { right: -1px; bottom: -11px; border-left-color: rgba(0, 0, 0, 0.25); border-width: 11px 0 11px 11px; }