ওলেগের উত্তর https://stackoverflow.com/a/42994192/9921853 সেখানে সেরা। এটি গতিশীলভাবে তৈরি উপাদানগুলিতে টুলটিপ শৈলী প্রয়োগ করতে দেয়। তবে এটি বুটস্ট্র্যাপ ৪ এর জন্য কাজ করে না এটি এটিকে কিছুটা সংশোধন করা উচিত:
বুটস্ট্র্যাপ 3:
$(document).on('inserted.bs.tooltip', function(e) {
var tooltip = $(e.target).data('bs.tooltip');
tooltip.$tip.addClass($(e.target).data('tooltip-custom-class'));
});
উদাহরণ: https://www.bootply.com/UORR04ncTP
বুটস্ট্র্যাপ 4:
$(document).on('inserted.bs.tooltip', function(e) {
var tooltip = $(e.target).data('bs.tooltip');
$(tooltip.tip).addClass($(e.target).data('tooltip-custom-class'));
});
উদাহরণ: https://jsfiddle.net/nsmcan/naq530hx
সম্পূর্ণ সমাধান (বুটস্ট্র্যাপ 3)
JS
$(document).on('inserted.bs.tooltip', function(e) {
var tooltip = $(e.target).data('bs.tooltip');
tooltip.$tip.addClass($(e.target).data('tooltip-custom-classes'));
});
$('body').tooltip({
selector: "[title]",
html: true
});
HTML
<h1>Test tooltip styling</h1>
<div><span title="Long-long-long tooltip doesn't fit the single line">Hover over me 1</span></div>
<div><span data-tooltip-custom-classes="tooltip-left" data-container="body" title="Example (left aligned):<br>Tooltip doesn't fit the single line, and is not a sibling">Hover over me 2</span></div>
<div><span class="text-danger" data-tooltip-custom-classes="tooltip-large tooltip-left tooltip-danger" title="Example (left aligned):<br>This long text we want to have in the single line">Hover over me 3</span></div>
CSS
.tooltip.tooltip-large > .tooltip-inner {
max-width: 300px;
}
.tooltip.tooltip-left > .tooltip-inner {
text-align: left;
}
.tooltip.top.tooltip-danger > .tooltip-arrow {
border-top-color: #d9534f;
}
.tooltip.top-left.tooltip-danger > .tooltip-arrow {
border-top-color: #d9534f;
}
.tooltip.top-right.tooltip-danger > .tooltip-arrow {
border-top-color:#d9534f;
}
.tooltip.right.tooltip-danger > .tooltip-arrow {
border-right-color: #d9534f;
}
.tooltip.left.tooltip-danger > .tooltip-arrow {
border-left-color: #d9534f;
}
.tooltip.bottom.tooltip-danger > .tooltip-arrow {
border-bottom-color: #d9534f;
}
.tooltip.bottom-left.tooltip-danger > .tooltip-arrow {
border-bottom-color: #d9534f;
}
.tooltip.bottom-right.tooltip-danger > .tooltip-arrow {
border-bottom-color: #d9534f;
}
.tooltip.tooltip-danger > .tooltip-inner {
background-color: #d9534f;
}