ПРОБЛЕМА : Использование Tooltipster. JS с FullCalendar и / или с динамической визуализацией content
Я долго царапал голову и пережевывал это, и я не близко к тому месту, где я был, когда начинал. Я прочитал и перечитал документы Tooltipster, но я просто не могу использовать 'data-tooltip-content' в качестве указателя на #idTooltipsterElement. Он просто отображает значение 'data-tooltip-content', хотя в документах четко указано:
Состояния документации Tooltipster:
5. Используйте HTML внутри ваших подсказок
Tooltipster позволяет вам использовать любую HTML разметку внутри ваших подсказок. Это означает, что вы можете вставлять такие вещи, как изображения и теги форматирования текста.
Вместо атрибута title используйте атрибут data-tooltip-content, чтобы обеспечить селектор, соответствующий элементу HTML вашей страницы, который должен использоваться как контент. Это ваш HTML:
<span class="tooltip" data-tooltip-content="#tooltip_content">This span has a tooltip with HTML when you hover over it!</span>
<div class="tooltip_templates">
<span id="tooltip_content">
<img src="myimage.png" /> <strong>This is the content of my tooltip!</strong>
</span>
</div>
В вашем файле CSS добавьте .tooltip_templates { display: none; }, чтобы содержимое не отображалось вне подсказки.
Когда мы перешли с Типпи. js на Tooltipster. js У меня были другие проблемы, которых, к счастью, нет в Tootipster, но я нашел Первый был гораздо проще в настройке, хотя он не был близок ни к функциональности, ни к документации, как к последнему.
Однако: ранее я просто использовал 'data-tooltip-content', чтобы поместить в него все свои элементы HTML, и как ни странно, я заметил, что это также работает с Tooltipster , хотя их документация кажется предпочитаю вышеуказанный подход. Теперь обычно я просто сохраняю старый подход, с которым я уже знаком, но, к сожалению, он приносит с собой целый ряд потенциальных проблем , связанных с изменениями рендеринга после события (которые мы, вероятно, реализуем) в FullCalendar которые мы широко используем на наших страницах, а также форматирование / трудности с оформлением , которые я уже испытывал.
Я разумно Конечно, предпочтительное решение , описанное в документированном Tooltipster, было бы идеальным для нашей реализации, но я просто не могу понять, как заставить его работать в нашей среде fullCalendar , которая разбита в следующем потоке программы:
eventRender : извлекать события из источника событий и отображать каждую запись для выбранного месяца / периода. Это где первоначальный Toolstipster создается и ему присваивается уникальный идентификатор
eventAfterAllRender : это в основном выполняется после eventRender, и именно здесь мы выполняем пост-рендеринг Например, проверьте наличие недействительных ссылок на изображения и т. д. c и замените, удалите все значки / ссылки на изображения, а также измените или отключите / удалите всплывающую подсказку, если она больше не нужна. При необходимости мы заменяем здесь содержимое всплывающей подсказки, в противном случае мы устанавливаем для содержимого всплывающей подсказки все данные, которые были переданы из процесса eventRender.
eventMouseover : этот раздел содержит событие метод hover, который отвечает за отображение всплывающей подсказки Tooltipster.
Я создал образец скрипта, используя сокращенную версию нашего кода и пару тестовых событий вместо использования внешнего источника данных, но результат тот же, когда я использую этот код в нашей собственной среде. Я включил следующее, чтобы отразить нашу среду: Bootstrap 4.4.0 - FullCalendar 3.10.1 - Tooltipster 4.2.7
Если навести курсор на одно из событий, всплывающая подсказка просто отображает значение указателя раздела, например, #tt_event1 (идентификатор элемента, на который он указывает) вместо того, что установлено в разделе содержимого
, например <div class="tooltip_templates"><span id="tt_event1" class="tooltip_content"><img src="https://hackernoon.com/hn-images/1*cmqZiJz1TuUedRoeI3g_Iw.jpeg" width="450" height="auto"><p style="text-align:left;"><span class="flag-icon flag-icon-uk"></span><strong class="title">Tips for Writing Cleaner Code</strong><br>optional desctiptive text can go here</p></span></div>
$(document).ready(function() {
$('#calendar').fullCalendar({
defaultView: 'month',
header: '',
defaultDate: '2020-03-01',
events: [{
id: 'event1',
className: 'UK',
title: 'Tips for Writing Cleaner Code',
description: 'I decided to write an article that will be useful for beginners to understand their mistakes and to put together some practices. /n source: hackernoon.com/tips-for-writing-cleaner-better-code-e36ffeb55526',
start: '2020-03-02', end: '2020-03-02'
}, {
id: 'event2',
className: 'NL',
title: 'Modern Style of Javascript with Arrow Functions',
description: 'The complete explanation of Arrow functions in Javascript, and how it helps developers to write flexible and consistent code. /n source: hackernoon.com/modern-style-of-javascript-with-arrow-functions-lg1x3474',
start: '2020-03-04', end: '2020-03-11'
}
],
eventRender: function(event, element, view) {
window.dataE = window.dataE || [];
element.attr( 'id', event.id );
var /* Vars */
desc = (event.description), url='',
urlEvent1 = "https://hackernoon.com/hn-images/1*cmqZiJz1TuUedRoeI3g_Iw.jpeg",
urlEvent2 = "https://images.unsplash.com/photo-1527427337751-fdca2f128ce5?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjEwMDk2Mn0",
tipRef="tip_content_"+event.id, idTip="#"+tipRef
/* End Vars */;
// passing 2 extra image params manually - usually from seperate data routine
if (event.title == 'Tips for Writing Cleaner Code') { url = urlEvent1; } else { url = urlEvent2; }
var tt_ref = '#tt_'+event.id;
var className = ''+event.className;
var cc = className.toLowerCase();
var tt = '<div class="tooltip_templates"><span id="tt_' + event.id + '" class="tooltip_content"><img src="' + url + '" width="450" height="auto"><p style="text-align:left;"><span class="flag-icon flag-icon-' + cc + '"></span><strong class="title">' + event.title + '</strong><br>optional desctiptive text can go here</p></span></div>';
element.attr( 'data-tooltip-content', tt_ref ); // the tooltip pointer
element.attr( 'data-tt-tooltipser' ); element.attr( 'data-tt-tooltipser', tt );
element.attr( 'tt_title' ); element.attr( 'tt_title', event.title );
element.addClass('tt_tooltip tt_group');
var eID = '#'+event.id;
// Tooltipster
if (!element.hasClass('tt_added')) {
$(eID).tooltipster();
$(eID).tooltipster({
//content: tipContent,
//contentCloning: true,
trigger: 'hover',
//multiple: true,
animation: 'fade',
arrow: true,
delay: 300,
maxWidth: 600,
contentAsHTML: true,
debug: true
});
element.addClass('tt_added');
}
// create array of event.IDs for use in [eventAfterAllRender]
if (Array.isArray(dataE)){
var json = JSON.stringify(event.id),
item = dataE.find(el => JSON.stringify(el) === json);
if (typeof item !== 'undefined'){
return false;
} else {
dataE.push(event.id);
}
}
},
eventAfterAllRender: function(event, element){
// get events from dataE array created during [eventRender]
var count = 0;
for (var i=0; i<dataE.length; i++) {
var id = dataE[i], eID = '#'+id ;
// now obtain the tooltip & tooltipster variables for each event
var tipTooltipRef = $(eID).attr('data-tooltip-content');
var tipTooltipsterContent = $(eID).attr('data-tt-tooltipser');
console.log("tipTooltipRef:", tipTooltipRef);
console.log("tipTooltipsterContent:", tipTooltipsterContent);
console.log("$(eID)", $(eID));
// append the tooltipster content aquired via tooltipster var
$(eID).append(tipTooltipsterContent);
$(eID).tooltipster();
// set the content pointer
$(eID).tooltipster('content', tipTooltipRef );
//TOOLTIPSTER: update any necessary Tooltip content
$('.fc-event').mouseenter(function() {
if (tipTooltipRef == '' || tipTooltipRef == 'undefined'){
$(eID).tooltipster('content', 'Invalid image link ?');
// OR simply: $(this).tooltipster('disable');
} else {
var t = $(eID).attr('tt_title'), tt_Title = '<div class="ttTitle">'+t+'</div>' ;
var tt_element = $(eID).find('.tooltipster-content');
tt_element.append(tt_Title);
$(eID).tooltipster('option','contentAsHTML','true');
$(eID).tooltipster('content', tipTooltipRef);
if (!$(eID).hasClass('tt_added')) {
$(eID).tooltipster();
$(eID).tooltipster({
content: tipTooltipRef,
//contentCloning: true,
trigger: 'hover',
//multiple: true,
animation: 'fade',
arrow: true,
delay: 300,
maxWidth: 600,
contentAsHTML: true,
//debug: true
});
// bind on start events (triggered on mouseenter)
$(eID).on('start', function(event) {
if ($(event.instance.elementOrigin()).hasClass('tt_group')){
var instances = $.tooltipster.instances('.tt_group'),
open = false,
duration;
$.each(instances, function (i, instance) {
if (instance !== event.instance) {
// if another instance is already open
if (instance.status().open){
open = true;
// get the current animationDuration
duration = instance.option('animationDuration');
// close the tooltip without animation
instance.option('animationDuration', 0);
instance.close();
// restore the animationDuration to its normal value
instance.option('animationDuration', duration);
}
}
});
// if another instance was open
if (open) {
duration = event.instance.option('animationDuration');
// open the tooltip without animation
event.instance.option('animationDuration', 0);
event.instance.open();
// restore the animationDuration to its normal value
event.instance.option('animationDuration', duration);
// now that we have opened the tooltip,
//the hover trigger must be stopped
event.stop();
}
}
});
$(eID).addClass('tt_added');
}
}
});
}
},
eventMouseover: function(view, event, element){
//TOOLTIPSTER: update any necessary Tooltip content
var tipContent = $(this).attr('data-ttipster');
var id = event.id //$(this).attr('id');
var eID = '#'+id;
var tipID = '#tt_'+id;
if (tipContent == '' || tipContent == 'undefined'){
$(eID).tooltipster('content', 'Invalid image ? detected: unable to display at present ?');
$(eID).tooltipster('disable');
// or $(this).tooltipster('destroy');
} else {
// TOOLTIPSTER: Not really req now as tipContent is set @ evenRender
//$(eID).tooltipster('option','contentAsHTML','true');
$(eID).tooltipster('option','multiple','true');
$(eID).tooltipster({
functionInit: function(instance, helper){
var content = $(helper.origin).find(tipID).detach();
instance.content(content);
}
});
if (!$(this).hasClass('tt_added')) {
$(eID).tooltipster();
$(eID).tooltipster({
content: tipContent,
//contentCloning: true,
trigger: 'hover',
//multiple: true,
animation: 'fade',
arrow: true,
delay: 300, //[300, 100]
maxWidth: 600,
contentAsHTML: true,
debug: true
});
// bind on start events (triggered on mouseenter)
$(this).on('start', function(event) {
if ($(event.instance.elementOrigin()).hasClass('tt_group')) {
var instances = $.tooltipster.instances('.tt_group'),
open = false,
duration;
$.each(instances, function (i, instance) {
if (instance !== event.instance) {
// if another instance is already open
if (instance.status().open){
open = true;
// get the current animationDuration
duration = instance.option('animationDuration');
// close the tooltip without animation
instance.option('animationDuration', 0);
instance.close();
// restore the animationDuration to its normal value
instance.option('animationDuration', duration);
}
}
});
// if another instance was open
if (open) {
duration = event.instance.option('animationDuration');
// open the tooltip without animation
event.instance.option('animationDuration', 0);
event.instance.open();
// restore the animationDuration to its normal value
event.instance.option('animationDuration', duration);
// now that we have opened the tooltip,
//the hover trigger must be stopped
event.stop();
}
}
});
$(this).addClass('tt_added');
}
}
},
eventClick: function(event, element, view) {
var e = (event.description);
if (e != null){
var chr = e.length;
// event click coded goes here
alert(e);
}
}
});
});
/* tooltipster.js */
.tooltip_templates {
display: none;
}
.tooltipster-content{
/*display: flex;
flex-direction: column;*/
}
.ttTitle {
}
/*! suit-flex-embed v1.4.0 | MIT License | github.com/suitcss */
.FlexEmbed {
display: block;
overflow: hidden;
position: relative;
}
.FlexEmbed:before {
content: "";
display: block;
width: 100%;
}
.FlexEmbed--16by9:before {
padding-bottom: 56.25%;
}
.FlexEmbed--4by3:before {
padding-bottom: 75%;
}
.FlexEmbed--1by1:before {
padding-bottom: 100%;
}
.CoverImage {
background-position: 50%;
background-repeat: no-repeat;
background-size: cover;
margin: 0 auto 1em;
max-height: 600px;
max-width: 600px;
}
.CoverImageX2 {
background-color: #808080;
background-position: 50%;
background-repeat: no-repeat;
background-size: 100% 100%; /*cover; contain;*/
margin: 0 auto 1em;
max-height: 2400px;
max-width: 1200px;
}
<!-- Bootstrap -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.0/css/bootstrap.min.css" integrity="sha384-SI27wrMjH3ZZ89r4o+fGIJtnzkAnFs3E4qz9DIYioCQ5l9Rd/7UAa8DHcaL8jkWt" crossorigin="anonymous" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.0/js/bootstrap.min.js" integrity="sha384-3qaqj0lc6sV/qpzrc1N5DC6i1VRn/HyX4qdPaiEFbn54VjQBEU341pvjz7Dv3n6P" crossorigin="anonymous"></script>
<!-- FulCalendar -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.1/fullcalendar.min.css" integrity="sha256-tXJP+v7nTXzBaEuLtVup1zxWFRV2jyVemY+Ir6/CTQU=" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js" integrity="sha256-4iQZ6BVL4qNKlQ27TExEhBN1HFPvAvAMbFavKKosSWQ=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.1/fullcalendar.min.js" integrity="sha256-O04jvi1wzlLxXK6xi8spqNTjX8XuHsEOfaBRbbfUbJI=" crossorigin="anonymous"></script>
<!-- Tooltipster -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tooltipster@4.2.7/dist/css/tooltipster.main.min.css" integrity="sha256-xlmCQ8IjIIx7gqrIAb5x5kEU30jJJm0/DEmrjgLow/E=" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tooltipster@4.2.7/dist/css/tooltipster.bundle.min.css" integrity="sha256-Qc4lCfqZWYaHF5hgEOFrYzSIX9Rrxk0NPHRac+08QeQ=" crossorigin="anonymous" />
<script src="https://cdn.jsdelivr.net/npm/tooltipster@4.2.7/dist/js/tooltipster.main.min.js" integrity="sha256-9gPC19rdxygnD5cXHFodzczLKeucNZ/dgzLhkKvNtQM=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/tooltipster@4.2.7/dist/js/tooltipster.bundle.min.js" integrity="sha256-NOU7KrY2aTI4PxDegqYUIknk9qfxVCS0E4JfE9aMwaA=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/tooltipster@4.2.7/dist/js/plugins/tooltipster/SVG/tooltipster-SVG.min.js" integrity="sha256-b9JNfGq08bjI5FVdN3ZhjWBSRsOyF6ucACQwlvgVEU4=" crossorigin="anonymous"></script>
<div id='calendar'></div>
В качестве альтернативы, если вы предпочитаете скрипку, которую я сделал ранее: https://jsfiddle.net/magicmb/3manqpho/
ДОПОЛНИТЕЛЬНО: Дополнительный бонусный вопрос
Еще одна потенциальная проблема с нашей реализацией Tooltipster. JS, и, возможно, для этого мне, возможно, придется создать отдельный вариант SO, но я в любом случае, я упомяну об этом здесь, так как я изо всех сил пытаюсь создать для него рабочую скрипку. То, что я пытался сделать со своим вторым событием, это продемонстрировать еще одно немного странное поведение Tooltipster:
Кажется, что Tooltipster имеет сложность с событиями, которые охватывают несколько дней и отличаются строки в FullCalendar. Кажется, что они работают только при наведении на первую часть события, то есть на бит в row1 , а не на наведение над второй частью в row2 .
Теперь, к сожалению, я не смог показать это на моей тестовой скрипке. Причина в том, что вполне может потребоваться создание отдельных событий для каждого дня (элементы в FullCalendar), хотя мое одиночное событие по какой-то причине кажется go до конца первой строки, но не до следующей. Следовательно, я не смог показать причудливое поведение, создав событие, которое охватывает две недели с одной датой начала и одной датой окончания, как я делал в моем тестовом примере.
Наша собственная система использует внешние источники данных , и это никогда не было очевидным. Также он работает только с нашей предыдущей реализацией Tooltip. js, и первоначально я также думал, что она работает с Tooltipster, но сейчас я не уверен. Возможно, это просто проблема с более поздними версиями Tooltipster [ EDIT : на самом деле из-за ранее использовавшегося data-tooltip-content для хранения всей всплывающей подсказки] или, возможно, они работают немного по-другому путь от предыдущих выпусков. В любом случае, если кто-то из вас знает что-то об этом, не стесняйтесь упоминать об этом в дополнение к главной проблеме, приведенной выше, о том, как заставить всплывающую подсказку HTML работать с использованием указателей внутри data-tooltip-content.