<div class="content-tooltip ">
<a href="https://google.com" class="button button--icon-text content-tooltip__button " target="_blank">
<span class="button__inner" data-text="Hover me">
<span class="button__text">
Hover me
<svg class="icon button__icon">
<use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#arrow-local"></use>
</svg>
</span>
</span>
</a>
<div class="content-tooltip__container">
<div class="content-section__overflow">
<figure class="image content-section--fluid content-section__image">
<img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20510%20695%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/510x695 100w" data-sizes="auto" alt="image alt text" class="image__img lazyload">
</figure>
</div>
</div>
</div>
<div class="content-tooltip {{ modifier }} {{ class }}">
{% if data.button %}
{% include '@button' with { class: 'content-tooltip__button', modifier: 'button--icon-text', data: data.button|merge({attributes: 'target="_blank"', icon: 'arrow-local'}) } %}
{% endif %}
{% if data.image %}
<div class="content-tooltip__container">
<div class="content-section__overflow">
{% include '@image' with { modifier: 'content-section--fluid', class: 'content-section__image', data: data.image} %}
</div>
</div>
{% endif %}
</div>
{
"language": "en-US",
"data": {
"button": {
"text": "Hover me",
"icon": "arrow-local",
"link": "https://google.com"
},
"image": {
"srcset": "//via.placeholder.com/510x695 100w",
"alt": "image alt text",
"aspectRatio": {
"width": 510,
"height": 695
}
}
}
}
.content-tooltip {
display: inline;
cursor: default;
}
.content-tooltip__container {
display: block;
position: fixed;
top: 0;
left: 0;
pointer-events: none;
width: 33vw;
z-index: map-get($zindex, tooltipContainer);
}
.content-tooltip__button {
cursor: pointer;
}
.content-section__overflow {
position: relative;
transition: $transition-duration $transition-easing;
transition-property: width;
width: 0;
overflow: hidden;
.content-tooltip:hover & {
@include bp(sm-min) {
@media (hover: hover) {
width: 100%;
}
}
}
}
import './content-tooltip.scss';
import Component from '@component';
import MouseMoveEvent = JQuery.MouseMoveEvent;
export default class ContentTooltip extends Component {
static initSelector: string = '.content-tooltip';
container: JQuery;
constructor(element: HTMLElement) {
super(element);
this.container = this.element.find('.content-tooltip__container');
this.init();
}
init(): void {
this.element.on('mousemove', this.mouseMoveHandler.bind(this));
}
mouseMoveHandler(event: MouseMoveEvent): void {
const containerHeight: number = this.container.height();
const elementTop: number = this.element.offset().top;
const windowTop: number = $(window).scrollTop();
const viewPortHeight: number = $(window).height();
this.container.css('left', event.clientX);
if ((elementTop - windowTop + (containerHeight - (containerHeight / 3))) > viewPortHeight) {
this.container.css('top', event.clientY - (containerHeight / 3 * 2));
} else {
this.container.css('top', event.clientY - (containerHeight / 3));
}
}
}