[vn-tooltip]{ cursor: help; } .tooltip { display: none; position: fixed; background-color: #fff; padding: 15px; max-width: 250px; color: #424242; z-index: 999; border: 1px solid #A7A7A7; text-align: justify; } .tooltip-show { display: inherit; } .tooltip-arrow { position: absolute; width: 0; height: 0; } .tooltip-down .tooltip-arrow { top: -15px; left: 50%; margin-left: -10px; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 15px solid #A7A7A7; } .tooltip-up .tooltip-arrow { bottom: -15px; left: 50%; margin-left: -10px; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 15px solid #A7A7A7; } .tooltip-right .tooltip-arrow { left: -15px; top: 50%; margin-top: -10px; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-right: 15px solid #A7A7A7; } .tooltip-left .tooltip-arrow { right: -15px; top: 50%; margin-top: -10px; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 15px solid #A7A7A7; }