.tip-bubble
        {
            font-size: 1.0em;
            padding: 4px 8px 4px 8px;
            text-align: center;
            position: fixed;
            z-index: 1000;
            border-radius: 2px;
            display: inline-block;
            opacity: 0;
            max-width: 300px;
        }

        .tip-bubble:after
        {
            content: '';
            position: absolute;
            margin-left: -8px;
            width: 0;
            height: 0;
        }

        .tip-bubble-center-point:after
        {
            left: 50%;
            right: auto;
        }

        .tip-bubble-left-point:after
        {
            left: 10px;
            right: auto;
        }

        .tip-bubble-right-point:after
        {
            right: 10px;
            left: auto;
        }

        .tip-arrow-top:after
        {
            border-bottom: solid 8px;
            border-right: solid 8px transparent;
            border-left: solid 8px transparent;
            bottom: 100%;
        }

        .tip-arrow-bottom:after
        {
            border-top: solid 8px;
            border-right: solid 8px transparent;
            border-left: solid 8px transparent;
            top: 100%;
        }

        .tip-theme-light:after
        {
            border-bottom-color: #fff;
            border-top-color: #fff;
        }

        .tip-theme-dark:after
        {
            border-bottom-color: #494949;
            border-top-color: #494949;
        }