function initializeTooltips() {
tippy('.code-annotation', {
theme: 'light',
arrow: true,
interactive: true,
});
}
/**
* Generates a `Tippy` instance for a tooltip that doesn't have a
* target element in the DOM -- and thus is positioned in the center
* of the view
*
* @return {tippy} The final tippy instance
* @private
*/
function _makeCenteredTippy() {
const tippyOptions = {
content: this.el,
placement: 'top',
...this.options.tippyOptions
};
tippyOptions.arrow = false;
tippyOptions.popperOptions = tippyOptions.popperOptions || {};
const finalPopperOptions = Object.assign(
{},
defaultPopperOptions,
tippyOptions.popperOptions,
{
modifiers: Object.assign(
centeredStylePopperModifier,
tippyOptions.popperOptions.modifiers
)
}
);
tippyOptions.popperOptions = finalPopperOptions;
return tippy(document.body, tippyOptions);
}
export function renderTooltip({ appendTo, chart, data, width, height, getTooltipHtml, getPositionX, getHoverColor }) {
chart.selectAll('.tooltip-template').remove();
const chartHoverTemplateId = uuid();
const getHoverTemplateId = (d, index) => `id${chartHoverTemplateId}_${index}`.replace('.', '');
appendTo
.selectAll('.hover-box')
.data(data)
.enter()
.append('rect')
.attr('fill', getHoverColor)
.attr('x', (d) => getPositionX(d) - (width / 2))
.attr('y', 0)
.attr('width', width)
.attr('height', height)
.attr('class', 'hover-box')
.attr('data-tippy-html', (d, index) => `#${getHoverTemplateId(d, index)}`);
chart.selectAll('.tooltip-template')
.data(data)
.enter()
.append('div')
.attr('id', getHoverTemplateId)
.attr('class', 'tooltip-template')
.html(getTooltipHtml);
tippy(chart.node().querySelectorAll('.hover-box'), {
id: 'chart-tooltip', // will ensure showing one tooltip at a time
arrow: true,
theme: 'chart light'
});
}
/**
* Generates a `Tippy` instance from a set of base `attachTo` options
*
* @return {tippy} The final tippy instance
* @private
*/
function _makeTippyInstance(attachToOptions) {
if (!attachToOptions.element) {
return _makeCenteredTippy.call(this);
}
const tippyOptions = _makeAttachedTippyOptions.call(this, attachToOptions);
return tippy(attachToOptions.element, tippyOptions);
}
componentDidMount(){
let p = this.props;
let target = p.target || this.target;
let options = p.tippy;
let content = this.content = hh('div', {
className: ( this.props.className || '' ) + ' popover-content'
});
let rawTippyOptions = _.assign( {}, tippyDefaults, options );
let tippyOptions = _.assign( {}, rawTippyOptions, {
html: content,
hideOnClick: false
} );
this.renderTipContent();
let tippy = tippyjs( target, tippyOptions ).tooltips[0];
let show = () => tippy.show();
let hide = () => tippy.hide();
if( p.show ){ p.show( show ); }
if( p.hide ){ p.hide( hide ); }
this.hideTippy = () => tippy.hide();
this.destroyTippy = () => tippy.destroy();
emitter.on('esc', this.hideTippy);
// the tippy hide on click doesn't work with react
if( rawTippyOptions.hideOnClick ){
this.onBodyClick = (e) => {
let parent = e.target;
let hide = true;
while( parent !== document.body ){
if( parent === content || parent === target ){
hide = false;
break;
}
parent = parent.parentNode;
}
if( hide ){
this.hideTippy();
}
};
document.body.addEventListener('click', this.onBodyClick);
}
}
document.addEventListener('turbolinks:load', function() {
tippy('.gold-split', {placement: 'left'})
tippy('.tip', {placement: 'top'})
tippy('.tip-top', {placement: 'top'})
tippy('.tip-bottom', {placement: 'bottom'})
tippy('.tip-right', {placement: 'right'})
tippy('.tip-left', {placement: 'left'})
})
function newTooltip() {
element.title = text;
tippy(element, {
placement: placement,
arrow: true,
performance: true,
size: 'large',
dynamicTitle: true,
arrowTransform: 'scale(0.75)',
distance: 10,
updateDuration: 100,
trigger: 'manual'
});
return element._tippy;
}
import tippy from 'tippy.js';
export default {
params: ['tipText'],
update() {
if (! this.params.tipText) return;
this.el.setAttribute('title', this.params.tipText);
tippy(this.el, {
size: 'small',
animateFill: false,
theme: 'light',
performance: true
});
}
}