Я бы хотел заменить стили подсказок Twitter Bootstrap с стиль popover. Как я могу это сделать?
Подсказки похожи по умолчанию:
Попутчики по умолчанию выглядят следующим образом:
Я хочу, чтобы мои подсказки были белыми, с серой рамкой, точно так же, как popovers.
Вы можете помочь?
Здесь, как я получил его для работы:
Добавить в переменные .less
@tooltipArrowOuterWidth: @tooltipArrowWidth + 1;
@tooltipArrowOuterColor: rgba(0,0,0,.25);
Добавить в пользовательский LESS файл
// Tooltip
// --------------------------------------------------
.tooltip.in { .opacity(100); }
.tooltip-inner {
background:@popoverTitleBackground;
color:@gray;
}
.tooltip .arrow {
border-width: @tooltipArrowOuterWidth;
}
.tooltip {
position: absolute;
top: 0;
left: 0;
z-index: @zindexPopover;
display: none;
max-width: 276px;
padding: 1px;
text-align: left; // Reset given new insertion method
background-color: @popoverBackground;
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
border: 1px solid #ccc;
border: 1px solid rgba(0,0,0,.2);
.border-radius(6px);
.box-shadow(0 5px 10px rgba(0,0,0,.2));
// Overrides for proper insertion
white-space: normal;
// Offset the popover to account for the popover arrow
&.top { margin-top: -10px; }
&.right { margin-left: 10px; }
&.bottom { margin-top: 10px; }
&.left { margin-left: -10px; }
}
.tooltip-inner {
margin: 0; // reset heading margin
padding: 4px 8px;
font-size: @baseFontSize * 0.9;
font-weight: normal;
line-height: 18px;
background-color: @popoverTitleBackground;
border-bottom: 1px solid darken(@popoverTitleBackground, 5%);
.border-radius(5px 5px 0 0);
&:empty {
display: none;
}
}
// Arrows
//
// .arrow is outer, .arrow:after is inner
.tooltip .tooltip-arrow,
.tooltip .tooltip-arrow:after {
position: absolute;
display: block;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
.tooltip .tooltip-arrow {
border-width: @tooltipArrowOuterWidth;
}
.tooltip .tooltip-arrow:after {
border-width: @tooltipArrowWidth;
content: "";
}
.tooltip {
&.top .tooltip-arrow {
left: 50%;
margin-left: [email protected];
border-bottom-width: 0;
border-top-color: #999; // IE8 fallback
border-top-color: @popoverArrowOuterColor;
bottom: [email protected];
&:after {
bottom: 1px;
margin-left: [email protected];
border-bottom-width: 0;
border-top-color: @tooltipArrowColor;
}
}
&.right .tooltip-arrow {
top: 50%;
left: [email protected];
margin-top: [email protected];
border-left-width: 0;
border-right-color: #999; // IE8 fallback
border-right-color: @tooltipArrowOuterColor;
&:after {
left: 1px;
bottom: [email protected];
border-left-width: 0;
border-right-color: @tooltipArrowColor;
}
}
&.bottom .tooltip-arrow {
left: 50%;
margin-left: [email protected];
border-top-width: 0;
border-bottom-color: #999; // IE8 fallback
border-bottom-color: @tooltipArrowOuterColor;
top: [email protected];
&:after {
top: 1px;
margin-left: [email protected];
border-top-width: 0;
border-bottom-color: @tooltipArrowColor;
}
}
&.left .tooltip-arrow {
top: 50%;
right: [email protected];
margin-top: [email protected];
border-right-width: 0;
border-left-color: #999; // IE8 fallback
border-left-color: @tooltipArrowOuterColor;
&:after {
right: 1px;
border-right-width: 0;
border-left-color: @tooltipArrowColor;
bottom: [email protected];
}
}
}
Если вы хотите изменить стиль для самой всплывающей подсказки, вам придется отредактировать класс .tooltip-inner в файле bootstrap css или переопределить класс .tooltip-inner с собственным классом.
Пример для границы:
.tooltip-inner {
border: solid 1px #ccc;
}
Пользовательский интерфейс JQuery вмешивается в бутстрап.
Они несовместимы друг с другом, поскольку они перекрываются во многих функциях.
У меня была эта проблема несколько недель назад и нашла эту страницу, но я не хотел начинать добавлять пользовательский css для чего-то, что должно "просто работать". После удаления пользовательского интерфейса JQuery сегодня (по другой причине) я заметил, что подсказки инструментов начали выглядеть так, как предполагалось. Я знаю, что это старый вопрос, но я нашел бы этот ответ полезным несколько недель назад.
JS
$(function() {
$('[title]').attr("data-rel", "tooltip");
$("[data-rel='tooltip']")
.attr("data-placement", "top")
.attr("data-content", function() {
return $(this).attr("title")
})
.removeAttr('title');
var showPopover = function() {
$(this).popover('show');
};
var hidePopover = function() {
$(this).popover('hide');
};
$("[data-rel='tooltip']").popover({
trigger: 'manual'
}).click(showPopover).hover(showPopover, hidePopover);
});
И простой HTML
<h1 title="This is title">What is this</h1>
Вот то, что сработало для меня по правой подсказке.
Я просто взял треугольник CSS того же размера, что и стрелка, а затем вытащил его из треугольника Bootstrap на том же расстоянии, что и ширина границы. При необходимости адаптируйте, и вы можете обратиться к этой замечательной статье для справки о том, как сделать треугольник, указывающий в любом направлении:
http://css-tricks.com/snippets/css/css-triangle/
.tooltip .tooltip-inner {
background: white;
color: black;
border: 3px solid black;
padding: 10px;
line-height: 1.65em;
}
.tooltip.right .tooltip-arrow {
top: 50%;
left: 0;
margin-top: -15px;
border-right-color: white;
border-width: 15px 15px 15px 0;
}
.tooltip.right .tooltip-arrow:after {
content: " ";
position: absolute;
z-index: -1;
width: 0;
height: 0;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-right: 15px solid black;
top: -15px;
left: -3px;
}
Так как лучший ответ скрывался в комментариях к вопросу и сначала не был видимым, я в конечном итоге нашел решение самостоятельно. В моем случае было проще всего использовать popover вместо подсказки с запуском этого события. Для этого у вас есть 2 варианта:
Вы можете использовать атрибут 'data-trigger':
<td id="3" data-content="Tooltip text" data-placement="bottom" data- container="body" data-trigger="hover" data-original-title="" title="">This tooltiped</span></td>
или используйте параметр "trigger" при инициализации popover:
$('.payment').popover({
trigger: "hover",
})