Как изменить css стиль подсказок (Tooltips)?

Разработчикам Общение разработчиков
1

Как изменить css стиль подсказок (Tooltips)?
Прописал в своем style.less - без результатно.

2

Стандартное уточнение - кеш чистили?

3

Да. Кэш чистил. Может в самом css есть ошибка.
Прописал следующее:
.tooltip {
position: absolute;
z-index: 1030;
display: block;
font-size: 11px;
line-height: 1.4;
opacity: 0;
visibility: visible;
&.in { .opacity(80); }
&.top { margin-top: -3px; padding: 5px 0; }
&.right { margin-left: 3px; padding: 0 5px; }
&.bottom { margin-top: 3px; padding: 5px 0; }
&.left { margin-left: -3px; padding: 0 5px; }
}
// Wrapper for the tooltip content
.tooltip-inner {
max-width: 200px;
padding: 8px;
color: #666;
text-align: center;
text-decoration: none;
background-color: #fff;
box-shadow: 0px 12px 10px -8px #777;
-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: #ccc;
border-width: 5px 5px 0;
}
&.right .tooltip-arrow {
top: 50%;
left: 0;
margin-top: -5px;
border-right-color: #ccc;
border-width: 5px 5px 5px 0;
}
&.left .tooltip-arrow {
top: 50%;
right: 0;
margin-top: -5px;
border-left-color: #ccc;
border-width: 5px 0 5px 5px;
}
&.bottom .tooltip-arrow {
top: 0;
left: 50%;
margin-left: -5px;
border-bottom-color: #ccc;
border-width: 0 5px 5px;
}
}
Не помогло. Подсказки вообще перестали всплывать.

4

Через инспектор посмотрите. Может за экран просто куда-то уехали подсказки или высота нулевая

5

Проблема решается до безобразия просто.
Вот правильный код:
.tooltip {
display: none;
max-width: 200px;
z-index: 10000;
padding: 9px;
background: rgba(0, 0, 0, 0.8);
color: #fff;
text-align: left;
font-weight: normal;
opacity: 1;
filter: alpha(opacity=100);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.tooltip p {
color: #fff;
padding: 0px;
}
.tooltip li{
color: #fff;
}
.tooltip-arrow {
position: absolute;
top: -10px;
right: 3px;
display: block;
width: 0px;
height: 0px;
border-style: solid;
border-width: 0 0 10px 10px;
border-color: transparent transparent rgba(0, 0, 0, 0.8) transparent;
}
.tooltip.arrow-top .tooltip-arrow {
top: auto;
left: auto;
bottom: -10px;
right: 3px;
border-width: 0 10px 10px 0;
border-color: transparent rgba(0, 0, 0, 0.8) transparent transparent;
}
.tooltip.right {
padding: 9px;
text-align: left !important;
}
.arrow-top.right .tooltip-arrow {
left: 3px;
right: auto;
border-width: 10px 10px 0 0;
border-color: rgba(0, 0, 0, 0.8) transparent transparent transparent;
}
.arrow-down.right .tooltip-arrow {
right: auto;
top: -10px;
left: 3px;
border-width: 10px 0 0 10px;
border-color: transparent transparent transparent rgba(0, 0, 0, 0.8);
}
.arrow-down.top .tooltip-arrow {
top: auto;
bottom: -10px;
border-width: 10px 0 0 10px;
border-color: rgba(0, 0, 0, 0.8) transparent transparent transparent;
}
.arrow-down.right.top .tooltip-arrow {
right: auto;
top: auto;
bottom: -10px;
left: 3px;
border-width: 10px 10px 0 0;
border-color: rgba(0, 0, 0, 0.8) transparent transparent transparent;
}
/* width image */
.tooltip img {
max-width: 100%;
}
.touchevents body {
cursor: pointer;
}
.touchevents.mouseevents body {
cursor: initial;
}
.ty-tooltip-block {
vertical-align: middle;
cursor: pointer;
}
Может пригодиться кому-нибудь.

1 лайк