/* атрибут елементу з підказкою */
[data-tooltip] {
display: inline-block;
position: relative;
/* вигляд курсору */
cursor: pointer; 
}

/*  по замовчуванню приховуємо підказку */
[data-tooltip]:before,
[data-tooltip]:after {
visibility: hidden;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
pointer-events: none;
}

/* визначаємо позицію підказки відносно елементу
* її розмір, форму, колір фону та тексту
*/
[data-tooltip]:before {
position: absolute;
bottom: 100%;
left: 100%;
margin-bottom: 5px;
padding: 7px 15px; /* внутрішні відступи*/
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px; /* заокруглені кути */
background: #32a5e7; /* колір фону */
color: #f4f4f4; /* колір тексту */
content: attr(data-tooltip);
/*white-space: nowrap; */ /* все в одну лінію завжди */
white-space: pre;
font-size: 14px;
line-height: 1.2;
/*text-shadow: 0 1px 1px hsla(0,0%,0%,1);/* тінь для текста */
z-index: 99999;
font-weight: 500;
}


/* показуємо підказку при наведенні курсору */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
visibility: visible;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
transition: all 0.4s ease-in-out; /*  додаємо плавності переходу */
}

.helper-text-1 {
    /*color: #ffd11a;*/
    color: #1995dc;
}
.helper-text-1 i {font-size: 16px;}
.left-top-orient:before {
    top: auto;
    bottom: 100%;
    left: auto;
    right: 50%;
    text-align: left;
}
.left-bottom-orient:before {
    top: 100%;
    bottom: auto;
    left: auto;
    right: 100%;
    text-align: left;
}
.right-top-orient:before {
    top: auto;
    bottom: 100%;
    left: 100%;
    right: auto;
    text-align: left;
}
.right-bottom-orient:before {
    top: 100%;
    bottom: auto;
    left: 100%;
    right: auto;
    text-align: left;
}
.center-bottom-orient:before {
    top: 100%;
    bottom: auto;
    left: auto;
    right: auto;
    text-align: left;
}
.center-top-orient:before {
    top: auto;
    bottom: 100%;
    left: auto;
    right: auto;
    text-align: left;
}