Я пытаюсь использовать tootltips, используя
.tooltip-inner{}
Но у меня проблемы, потому что я не могу найти, как стилизовать подсказку маленькой стрелкой.
Как показано на скриншоте, стрелка всплывающей подсказки черная, я хочу добавить к ней новый цвет:
любое предложение?
Вы можете использовать это, чтобы изменить цвет подсказки-стрелки
.tooltip.bottom .tooltip-arrow {
top: 0;
left: 50%;
margin-left: -5px;
border-bottom-color: #000000; /* black */
border-width: 0 5px 5px;
}
Используйте эту таблицу стилей, чтобы начать работу.
.tooltip{
position:absolute;
z-index:1020;
display:block;
visibility:visible;
padding:5px;
font-size:11px;
opacity:0;
filter:alpha(opacity=0)
}
.tooltip.in{
opacity:.8;
filter:alpha(opacity=80)
}
.tooltip.top{
margin-top:-2px
}
.tooltip.right{
margin-left:2px
}
.tooltip.bottom{
margin-top:2px
}
.tooltip.left{
margin-left:-2px
}
.tooltip.top .tooltip-arrow{
bottom:0;
left:50%;
margin-left:-5px;
border-left:5px solid transparent;
border-right:5px solid transparent;
border-top:5px solid #000
}
.tooltip.left .tooltip-arrow{
top:50%;
right:0;
margin-top:-5px;
border-top:5px solid transparent;
border-bottom:5px solid transparent;
border-left:5px solid #000
}
.tooltip.bottom .tooltip-arrow{
top:0;
left:50%;
margin-left:-5px;
border-left:5px solid transparent;
border-right:5px solid transparent;
border-bottom:5px solid #000
}
.tooltip.right .tooltip-arrow{
top:50%;
left:0;
margin-top:-5px;
border-top:5px solid transparent;
border-bottom:5px solid transparent;
border-right:5px solid #000
}
.tooltip-inner{
max-width:200px;
padding:3px 8px;
color:#fff;
text-align:center;
text-decoration:none;
background-color:#000;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px
}
.tooltip-arrow{
position:absolute;
width:0;
height:0
}
Я создал скрипку для вас.
Взгляните на here
<p>
<a class="tooltip" href="#">Tooltip
<span>
<img alt="CSS Tooltip callout"
src="http://www.menucool.com/tooltip/src/callout.gif" class="callout">
<strong>Most Light-weight Tooltip</strong><br>
This is the easy-to-use Tooltip driven purely by CSS.
</span>
</a>
</p>
a.tooltip {
outline: none;
}
a.tooltip strong {
line-height: 30px;
}
a.tooltip:hover {
text-decoration: none;
}
a.tooltip span {
z-index: 10;
display: none;
padding: 14px 20px;
margin-top: -30px;
margin-left: 28px;
width: 240px;
line-height: 16px;
}
a.tooltip:hover span {
display: inline;
position: absolute;
color: #111;
border: 1px solid #DCA;
background: #fffAF0;
}
.callout {
z-index: 20;
position: absolute;
top: 30px;
border: 0;
left: -12px;
}
/*CSS3 extras*/
a.tooltip span {
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-moz-box-shadow: 5px 5px 8px #CCC;
-webkit-box-shadow: 5px 5px 8px #CCC;
box-shadow: 5px 5px 8px #CCC;
}
Вы всегда можете попробовать разместить этот код в своем главном CSS без изменения файла начальной загрузки, что наиболее рекомендуется, чтобы вы сохраняли согласованность, если в будущем вы обновите файл начальной загрузки.
.tooltip-inner {
background-color: #FF0000;
}
.tooltip.right .tooltip-arrow {
border-right: 5px solid #FF0000;
}
Обратите внимание, что этот пример предназначен для правильной подсказки. Свойство tooltip-inner изменяет цвет BG tooltip, а другой изменяет цвет стрелки.
Стрелка - это граница.
Вам нужно изменить для каждой стрелки цвет в зависимости от "размещения данных" всплывающей подсказки.
.tooltip.top .tooltip-arrow {
border-top-color: @color;
}
.tooltip.top-left .tooltip-arrow {
border-top-color: @color;
}
.tooltip.top-right .tooltip-arrow {
border-top-color:@color;
}
.tooltip.right .tooltip-arrow {
border-right-color: @color;
}
.tooltip.left .tooltip-arrow {
border-left-color: @color;
}
.tooltip.bottom .tooltip-arrow {
border-bottom-color: @color;
}
.tooltip.bottom-left .tooltip-arrow {
border-bottom-color: @color;
}
.tooltip.bottom-right .tooltip-arrow {
border-bottom-color: @color;
}
.tooltip > .tooltip-inner {
background-color: @color;
}
Для стилизации каждой направленной стрелки (слева, справа, сверху и снизу) мы должны выбрать каждую стрелку с помощью селектора атрибутов CSS, а затем индивидуально их разделить.
Trick: Верхняя стрелка должна иметь цвет границы только сверху и прозрачную на других 3 сторонах. Другие направленные стрелки также должны быть написаны таким образом.
нажмите здесь для рабочей ссылки Jsfiddle
Вот простой CSS,
.tooltip-inner { background-color:#8447cf;}
[data-placement="top"] + .tooltip > .tooltip-arrow { border-top-color: #8447cf;}
[data-placement="right"] + .tooltip > .tooltip-arrow { border-right-color: #8447cf;}
[data-placement="bottom"] + .tooltip > .tooltip-arrow {border-bottom-color: #8447cf;}
[data-placement="left"] + .tooltip > .tooltip-arrow {border-left-color: #8447cf; }
Если вы хотите стилизовать только цвета всплывающих подсказок, выполните следующие действия:
.tooltip-inner { background-color: #000; color: #fff; }
.tooltip.top .tooltip-arrow { border-top-color: #000; }
.tooltip.right .tooltip-arrow { border-right-color: #000; }
.tooltip.bottom .tooltip-arrow { border-bottom-color: #000; }
.tooltip.left .tooltip-arrow { border-left-color: #000; }
Это работало для меня!
.tooltip .tooltip-arrow {
border-top: 5px solid red !important;}
В случае, если вы идете вокруг и вокруг, чтобы понять это, и ни один из вышеперечисленных параметров не работает, возможно, вы столкнулись с конфликтом пространства имен.tooltip с bootstrap и jquery.
См. этот ответ о том, как исправить: jQueryUI Подсказки конкурируют с Twitter Bootstrap
Вы можете добавить 'display: none;' to.tooltip-arrow class
.tooltip-arrow {
display: none;
}