フルカレンダーアプリでツールチップを表示しようとしています。しかし、bootstrap.cssを含めると、機能しません。それなしでコードを実行すると、すべてが機能しています。
var calendar = new Calendar(calendarEl, {
events: [
{
title: 'My Event',
start: '2010-01-01',
description: 'This is a cool event'
}
// more events here
],
eventRender: function(info) {
var tooltip = new Tooltip(info.el, {
title: info.event.extendedProps.description,
placement: 'top',
trigger: 'hover',
container: 'body'
});
}
});
Fullcalendar.ioページのこのサンプルコードとbootstrap.min.cssは除外されており、すべてが機能しています。
編集：mdboostrap.cssも使用していることを追加するのを忘れました
編集：問題を示しているCodepenへのリンク：https：//codepen.io/anon/pen/WqKvYv 。CSSオプションからtwitter-bootstrapを削除すると、ツールチップが表示されます
これは、BootstrapのCSSにに関連するルールが含まれているために発生し.tooltipます。したがって、これらのCSSルールとtooltip.jsに含めたルールの間には競合があります。
ただし、bootstrapには、 popper.jsに基づく独自のツールチップ機能が含まれています。すでにBootstrapを使用している場合は、上にtooltip.jsは必要ありません。Bootstrapのものを使用するだけです。
必ず含める
popper.min.js
bootstrap.min.js
この順序で、CSSの場合は、カスタムツールチップCSSを削除し、
bootstrap.min.css
あなたのページで。
コードでは、Bootstrapツールチップにtooltip.jsと同じオプションをすべて使用できます（どちらもpopper.jsに基づいているため）。
eventRender: function(info) {
$(info.el).tooltip({
title: info.event.extendedProps.description,
placement: "top",
trigger: "hover",
container: "body"
});
},
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加