$tooltip-prefix-cls: $prefix-name + "tooltip";
$tooltip-arrow-width: 5px; 
$tooltip-distance: $tooltip-arrow-width - 1 + 4;
$tooltipColor : #fff;
.#{$tooltip-prefix-cls} {

    & {
        display: inline-block;

        &-poper {
            display: block; 
            font-size: 14px;
            line-height: $lineHeight;
            position: absolute; 
            opacity: 0;
            transition: opacity .3s;
            &-show{
                opacity: 1;
            }

            /**right start*/
            &[data-popper-placement^="right"] {
                padding: 0 $tooltip-arrow-width 0 $tooltip-distance;

                .#{$tooltip-prefix-cls}-arrow {
                    left: $tooltip-distance - $tooltip-arrow-width;
                    border-width: $tooltip-arrow-width $tooltip-arrow-width $tooltip-arrow-width 0;
                    border-right-color: $tooltipBg;
                }
            }

            &[data-popper-placement^="right-start"] {
                .#{$tooltip-prefix-cls}-arrow {
                    top: $tooltip-arrow-width;

                }
            }

            &[data-popper-placement="right"] {
                .#{$tooltip-prefix-cls}-arrow {
                    top: 50%;
                    margin-top: -$tooltip-arrow-width;
                }
            }

            &[data-popper-placement^="right-end"] {
                .#{$tooltip-prefix-cls}-arrow {
                    bottom: $tooltip-arrow-width;
                }
            }

            /**right end*/

            /**left start*/
            &[data-popper-placement^="left"] {
                padding: 0 $tooltip-distance 0 $tooltip-arrow-width;

                .#{$tooltip-prefix-cls}-arrow {
                    right: $tooltip-distance - $tooltip-arrow-width;
                    border-width: $tooltip-arrow-width 0 $tooltip-arrow-width $tooltip-arrow-width;
                    border-left-color: $tooltipBg;
                }
            }

            &[data-popper-placement^="left-start"] {
                .#{$tooltip-prefix-cls}-arrow {
                    top: $tooltip-arrow-width;

                }
            }

            &[data-popper-placement="left"] {
                .#{$tooltip-prefix-cls}-arrow {
                    top: 50%;
                    margin-top: -$tooltip-arrow-width;
                }
            }

            &[data-popper-placement^="left-end"] {
                .#{$tooltip-prefix-cls}-arrow {
                    bottom: $tooltip-arrow-width;
                }
            }

            /**left end*/



            /**bottom start*/
            &[data-popper-placement^="bottom"] {
                padding: $tooltip-distance 0 $tooltip-arrow-width 0;

                .#{$tooltip-prefix-cls}-arrow {
                    top: $tooltip-distance - $tooltip-arrow-width;
                    border-width: 0 $tooltip-arrow-width $tooltip-arrow-width ;
                    border-bottom-color: $tooltipBg;
                }
            }

            &[data-popper-placement^="bottom-start"] {
                .#{$tooltip-prefix-cls}-arrow {
                    left: $tooltip-arrow-width;

                }
            }

            &[data-popper-placement="bottom"] {
                .#{$tooltip-prefix-cls}-arrow {
                    left: 50%;
                    margin-left: -$tooltip-arrow-width;
                }
            }

            &[data-popper-placement^="bottom-end"] {
                .#{$tooltip-prefix-cls}-arrow {
                    right: $tooltip-arrow-width;
                }
            }

            /**bottom end*/



            /**top start*/
            &[data-popper-placement^="top"] {
                padding: $tooltip-arrow-width 0 $tooltip-distance 0;

                .#{$tooltip-prefix-cls}-arrow {
                    bottom: $tooltip-distance - $tooltip-arrow-width;
                    border-width: $tooltip-arrow-width $tooltip-arrow-width 0;
                    border-top-color: $tooltipBg;

                }
            }

            &[data-popper-placement^="top-start"] {
                .#{$tooltip-prefix-cls}-arrow {
                    left: $tooltip-arrow-width;
                }
            }

            &[data-popper-placement="top"] {
                .#{$tooltip-prefix-cls}-arrow {
                    left: 50%;
                    margin-left: -$tooltip-arrow-width;
                }
            }

            &[data-popper-placement^="top-end"] {
                .#{$tooltip-prefix-cls}-arrow {
                    right: $tooltip-arrow-width;
                }
            }

            /**top end*/



        }

        &-rel {
            display: inline-block;
            position: relative;
            width: inherit;
        }


        &-arrow {
            position: absolute;
            width: 0;
            height: 0;
            border-color: transparent;
            border-style: solid;


        }


        &-inner { 
            min-height: 34px;
            padding: 8px 12px;
            color: $tooltipColor;
            text-align: left;
            text-decoration: none;
            background-color: $tooltipBg;
            border-radius: $borderRadius;
            box-shadow: $shadow-base;
            
            
            white-space: pre-wrap;
            text-align: justify;
            word-wrap: break-word;
            word-break: break-all;
        }
    }


}