Чтобы добавить к существующим сообщениям, иногда кодирование для интерфейсов помогает в больших проектах, когда разработчики работают на отдельных компонентах одновременно. Все, что вам нужно, это определить интерфейсы заранее и написать код для них, а другие разработчики пишут код для интерфейса, который вы реализуете.
Единственный поддерживаемый trigger
, который откроет всплывающую подсказку в диаграмме временной шкалы, это focus
Возможное обходное решение:
google.setOnLoadCallback(drawVisualization);
function drawVisualization() {
var container = document.getElementById('timeline');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({
type: 'string',
id: 'President'
});
dataTable.addColumn({
type: 'date',
id: 'Start'
});
dataTable.addColumn({
type: 'date',
id: 'End'
});
dataTable.addRows([
['Washington', new Date(1789, 3, 30), new Date(1797, 2, 4)],
['Adams', new Date(1797, 2, 4), new Date(1801, 2, 4)],
['Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4)]
]);
//select-handler
google.visualization.events.addListener(chart, 'select', function(e) {
//the built-in tooltip
var tooltip = document.querySelector('.google-visualization-tooltip:not([clone])');
//remove previous clone when there is any
if (chart.ttclone) {
chart.ttclone.parentNode.removeChild(chart.ttclone)
}
//create a clone of the built-in tooltip
chart.ttclone = tooltip.cloneNode(true);
//create a custom attribute to be able to distinguish
//built-in tooltip and clone
chart.ttclone.setAttribute('clone', true);
//inject clone into document
tooltip.parentNode.insertBefore(chart.ttclone, chart.tooltip);
});
chart.draw(dataTable, {tooltip: {isHtml: true }});
}
.google-visualization-tooltip {
opacity: 0 !important;
max-width: 200px !important;
}
.google-visualization-tooltip[clone] {
opacity: 1 !important;
}
html,
body,
timeline {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['timeline']}]}"></script>
<div id='timeline' style="height:90%"></div>
Он по-прежнему использует поведение по умолчанию (всплывающая подсказка по фокусу). Но встроенная всплывающая подсказка скрыта (через CSS)
В обработчике выбора извлекается встроенная всплывающая подсказка из документа (она скрыта, но она все еще там) и создает клон, который будет быть введены в документ.