모든 툴팁에 영향을 주지 않고 일부 부트스트랩 툴팁.js 툴팁의 스타일(CSS)을 지정하고 싶습니다. 여러 가지 해결책을 시도해 보았지만 항상 도구 설명을 트리거하는 요소에 클래스를 추가하는 것으로 끝납니다.
이것이 제가 시도한 것입니다:
$(function(){
$("[id$=amount]").tooltip({
trigger: 'manual',
placement: 'right'
}).addClass("test"); // <--- This does not help me. Class just ends up
}); // in the trigger element. Se html output
// from firebug below...
하지만 클래스는 툴팁을 트리거하는 요소에서 끝납니다:
<input
id="list_wishes_attributes_0_amount"
class="test" <!-- The class I tried to add to the tooltip ended up here. -->
type="text"
tabindex="3"
size="30"
rel="tooltop"
name="list[wishes_attributes][0][amount]"
min="0"
data-original-title="Only numbers please"
/>
툴팁을 트리거하는 입력 필드가 아닌 사용자 지정 클래스를 툴팁에 할당하려면 어떻게 해야 하나요?
부트스트랩 4 이전 버전:
$().tooltip({
template: '<div class="tooltip CUSTOM-CLASS"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'
})
부트스트랩 4:
$().tooltip({
template: '<div class="tooltip CUSTOM-CLASS" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'
})
내가 사용하는 방법을 통해 직접 클래스용 첨부하려면 JQuery element 는 (은 부트스트랩에 3). # 39 의 난이도 때문에 조금 it& 찾기 위해 필요한 데이터 's' 를 통해 자동으로 parent& # 39, 요소 숨김 속성.
<! - 언어: 자바스크립트 - >.
$('#[id$=amount]')
.tooltip()
.data('bs.tooltip')
.tip()
.addClass('custom-tooltip-class');
이 때문에 내가 포지셔닝하십시오 재정의을 템플릿에는 it& # 39 에 비해 훨씬 더 간결하고 더 자세히 락하였으니 추가 HTML.
'클래스', '- 구축, tooltip-custom" 사용자 정의 클래스를 데이터 = " 도구팁 도구팁 사용자 정의 함께'.
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" data-custom-class="tooltip-custom" title="Custom tooltip example">Tooltip example</button>
'-' 를 통해 쿠스토무클레스 매개변수입니다:
'쿠스토무클레스: # 39, & # 39 tooltip-custom&. '
$('.my-element').tooltip({
customClass: 'tooltip-custom'
});
이 코드는 사용된 버전 (또는 v4 알파 v3, v4) 부트스트랩이 따라 다릅니다.
;(function($) {
if (typeof $.fn.tooltip.Constructor === 'undefined') {
throw new Error('Bootstrap Tooltip must be included first!');
}
var Tooltip = $.fn.tooltip.Constructor;
// add customClass option to Bootstrap Tooltip
$.extend( Tooltip.Default, {
customClass: ''
});
var _show = Tooltip.prototype.show;
Tooltip.prototype.show = function () {
// invoke parent method
_show.apply(this,Array.prototype.slice.apply(arguments));
if ( this.config.customClass ) {
var tip = this.getTipElement();
$(tip).addClass(this.config.customClass);
}
};
})(window.jQuery);
.tooltip-custom .tooltip-inner {
background-color: #5b2da3;
}
.tooltip-custom.bs-tooltip-top .arrow:before {
border-top-color: #5b2da3;
}
.tooltip-custom.bs-tooltip-right .arrow:before {
border-right-color: #5b2da3;
}
.tooltip-custom.bs-tooltip-left .arrow:before {
border-left-color: #5b2da3;
}
.tooltip-custom.bs-tooltip-bottom .arrow:before {
border-bottom-color: #5b2da3;
}
@mixin tooltip-custom($bg-color, $color: $tooltip-color) {
.tooltip-inner {
background-color: $bg-color;
@if $color != $tooltip-color {
color: $color;
}
}
&.bs-tooltip-top .arrow:before {
border-top-color: $bg-color;
}
&.bs-tooltip-right .arrow:before {
border-right-color: $bg-color;
}
&.bs-tooltip-left .arrow:before {
border-left-color: $bg-color;
}
&.bs-tooltip-bottom .arrow:before {
border-bottom-color: $bg-color;
}
}
(function ($) {
if (typeof $.fn.tooltip.Constructor === 'undefined') {
throw new Error('Bootstrap Tooltip must be included first!');
}
var Tooltip = $.fn.tooltip.Constructor;
$.extend( Tooltip.DEFAULTS, {
customClass: ''
});
var _show = Tooltip.prototype.show;
Tooltip.prototype.show = function () {
_show.apply(this,Array.prototype.slice.apply(arguments));
if ( this.options.customClass ) {
var $tip = this.tip()
$tip.addClass(this.options.customClass);
}
};
})(window.jQuery);
.tooltip-custom .tooltip-inner {
background-color: #5b2da3;
}
.tooltip-custom.top .tooltip-arrow {
border-top-color: #5b2da3;
}
.tooltip-custom.right .tooltip-arrow {
border-right-color: #5b2da3;
}
.tooltip-custom.left .tooltip-arrow {
border-left-color: #5b2da3;
}
.tooltip-custom.bottom .tooltip-arrow {
border-bottom-color: #5b2da3;
}
;(function($) {
if (typeof $.fn.tooltip.Constructor === 'undefined') {
throw new Error('Bootstrap Tooltip must be included first!');
}
var Tooltip = $.fn.tooltip.Constructor;
// add customClass option to Bootstrap Tooltip
$.extend( Tooltip.Default, {
customClass: ''
});
var _show = Tooltip.prototype.show;
Tooltip.prototype.show = function () {
// invoke parent method
_show.apply(this,Array.prototype.slice.apply(arguments));
if ( this.config.customClass ) {
var tip = this.getTipElement();
$(tip).addClass(this.config.customClass);
}
};
})(window.jQuery);
.tooltip-custom .tooltip-inner {
background-color: #5b2da3;
}
.tooltip-custom.tooltip-top .tooltip-inner::before,
.tooltip-custom.bs-tether-element-attached-bottom .tooltip-inner::before {
border-top-color: #5b2da3;
}
.tooltip-custom.tooltip-right .tooltip-inner::before,
.tooltip-custom.bs-tether-element-attached-left .tooltip-inner::before {
border-right-color: #5b2da3;
}
.tooltip-custom.tooltip-bottom .tooltip-inner::before,
.tooltip-custom.bs-tether-element-attached-top .tooltip-inner::before {
border-bottom-color: #5b2da3;
}
.tooltip-custom.tooltip-left .tooltip-inner::before,
.tooltip-custom.bs-tether-element-attached-right .tooltip-inner::before {
border-left-color: #5b2da3;
}
@mixin tooltip-custom($bg-color, $color: $tooltip-color) {
.tooltip-inner {
background-color: $bg-color;
@if $color != $tooltip-color {
color: $color;
}
}
&.tooltip-top,
&.bs-tether-element-attached-bottom {
.tooltip-inner::before {
border-top-color: $bg-color;
}
}
&.tooltip-right,
&.bs-tether-element-attached-left {
.tooltip-inner::before {
border-right-color: $bg-color;
}
}
&.tooltip-bottom,
&.bs-tether-element-attached-top {
.tooltip-inner::before {
border-bottom-color: $bg-color;
}
}
&.tooltip-left,
&.bs-tether-element-attached-right {
.tooltip-inner::before {
border-left-color: $bg-color;
}
}
}
https://github.com/andreivictor/bootstrap-tooltip-custom-class
아마 이 누군가를 도울 수 있는 정보기술 (it) 등) 가 봐요.
사용자 정의 클래스를 추가하기에서는 데이터베이스에구성원을 " generated"; 도구팁 노드입니다:
$(document).ready(function() {
$(".my-class").tooltip({
tooltipClass:"my-custom-tooltip"
});
});
몸의 견본입니다 tpc. 마지막 하위 요소:
<div id="ui-tooltip-1" role="tooltip" class="ui-tooltip ui-widget ui-corner-all ui-widget-content my-custom-tooltip" style="top: 295px; left: 908px; display: block;">
<div class="ui-tooltip-content">My title contnet</div>
</div>
이 질문에 발려짐 논리를 폈다.
$(function(){
$("[id$=amount]").tooltip({
trigger: 'manual',
placement: 'right'
tooltipClass:'test'
})
});
Jquery UI 를 사용하여 테스트되었습니다 v1.10.3 -
'html' 옵션을 'true'로 설정하고 '제목' 옵션에 'YOUR TEXT'와 같은 내용을 삽입해 보세요.
$(function(){
$("[id$=amount]").tooltip({
trigger: 'manual',
placement: 'right',
html: true,
title: '<span class="test">YOUR TEXT</span>'
});
});
솔직히 이 방법이 효과가 있을지는 모르겠지만 시도해 볼 만한 가치가 있다고 생각합니다.
편집: 이 게시물]1을 읽으시면 더 도움이 될 수 있습니다.