<div class="tooltip tooltip-lookup tooltip-custom js-tooltip">
    <div class="tooltip-inner">
        <div class="tooltip-header">
            <div class="text"></div>
        </div>

        <div class="tooltip-content">
        </div>
    </div>
</div>
<div class="tooltip tooltip-lookup tooltip-custom js-tooltip">
	<div class="tooltip-inner">
		<div class="tooltip-header">
			<div class="text">{{ title }}</div>
		</div>

		<div class="tooltip-content">
			{{#each rows as |row index| }}

			<div data-col="{{ row.columns }}" class="tooltip-{{ row.class }} -align-{{ row.align }}">
				<div class="text" data-span="1">{{ row.label }}</div>
				{{#each row.data }}
					<div class="text row-data" data-span="1">
						{{#if this.link }}
							<a href="{{ this.href }}" {{#if this.external }}target="_blank"{{/if}}>{{ this.display }}</a>
						{{else}}
							<strong>{{ this.value }}</strong>
						{{/if}}
					</div>
				{{/each}}
			</div>

			{{/each}}
		</div>
	</div>
</div>
/* No context defined for this component. */
  • Content:
    .tooltip {
    	position: absolute;
    	top: 50%;
    	left: 50%;
    	transform: translateX(5rem);
    	z-index: 15;
    
    	min-width: 100rem;
    
    	color: rgba(white, 0.7);
    	opacity: 0;
    	visibility: hidden;
    
    	transition: {
    		property: opacity, visibility;
    		duration: $transition;
    	}
    
    	&.-active {
    		opacity: 1;
    		visibility: visible;
    	}
    
    	&.tooltip-lookup {
    		position: fixed;
    		transform: translate3d(-100%, -50%, 0) translateX(-4rem);
    
    		max-height: 100%;
    		padding: 0;
    
    		&::after {
    			top: 50%;
    			left: auto;
    			right: 0;
    			transform: translate(50%, -50%) rotate(45deg);
    		}
    
    		.tooltip-content {
    			&::before {
    				background: $color-irma-secondary;
    			}
    		}
    
    		.tooltip-details {
    			[data-span] {
    				text-align: left;
    			}
    		}
    	}
    
    	&::after {
    		content: '';
    
    		position: absolute;
    		top: 6rem;
    		left: 0;
    		transform: translate(-50%) rotate(45deg);
    		z-index: -1;
    
    		display: block;
    		width: 4rem;
    		height: 4rem;
    
    		background: $color-irma-navy;
    	}
    
    	a, .link {
    		text-decoration: underline;
    	}
    
    	.tooltip-inner {
    		position: relative;
    
    		max-height: calc(100vh - 20rem - 10rem);
    		overflow-y: auto;
    
    		background: $color-irma-navy;
    		box-shadow: 0 5px 20px 0 rgba(black, 0.1);
    	}
    
    	.tooltip-header {
    		width: 100%;
    		height: 10rem;
    		padding: 0 6rem;
    
    		color: white;
    
    		.text {
    			text-transform: uppercase;
    			@include font-primary-bold;
    			@include font-size-small;
    			line-height: 10rem;
    		}
    	}
    
    	.tooltip-content {
    		position: relative;
    
    		padding: 6rem;
    		padding-bottom: 8rem;
    
    		&::before {
    			content: '';
    
    			position: absolute;
    			top: 0;
    			left: 0;
    			transform: translateY(-100%);
    
    			display: block;
    			width: 100%;
    			height: 5px;
    
    			background: $color-irma-primary;
    		}
    	}
    
    	.tooltip-subheadline {
    		@include font-primary-bold;
    		@include font-size-small;
    		text-transform: uppercase;
    
    		padding-bottom: 3rem;
    
    		border-bottom: 1px solid rgba($color-irma-silver, 0.2);
    
    		&:not(:first-child) {
    			margin-top: 8rem;
    		}
    	}
    
    	.tooltip-row {
    		margin-top: 3rem;
    
    		@include font-size-small;
    		line-height: 1.2em;
    
    		a {
    			color: inherit;
    		}
    	}
    
    	.bottom-line {
    		padding-top: 3rem;
    		margin-top: 8rem;
    
    		border-top: 1px solid rgba($color-irma-silver, 0.2);
    
    		@include font-primary-bold;
    		@include font-size-small;
    	}
    
    	strong {
    		color: white;
    
    		@include font-primary-bold;
    	}
    
    	[data-span] {
    		&:not(:first-child) {
    			text-align: right;
    		}
    	}
    
    	&.tooltip-custom {
    		min-width: 150rem;
    		
    		.tooltip-divider {
    			border-bottom: 1px solid rgba($color-irma-silver, 0.2);
    
    			&:not(:first-child) {
    				margin-top: 5rem;
    
    				& + * {
    					margin-top: 5rem;
    				}
    			}
    		}
    
    		.tooltip-subheadline {
    			padding-bottom: 0;
    
    			border-bottom: 0;
    
    			&:not(:first-child) {
    				margin-top: 7.5rem;
    			}
    
    			& + .tooltip-divider {
    				margin-top: 2.5rem;
    			}
    
    			strong {
    				color: rgba(white, 0.7);
    			}
    		}
    
    		.tooltip-row {
    			&:empty {
    				margin-top: 0;
    				height: 3rem;
    			}
    		}
    
    		.tooltip-row, .tooltip-subheadline {
    			&.-align-left {
    				.row-data {
    					text-align: left !important;
    				}
    			}
    
    			&.-align-right {
    				.row-data {
    					text-align: right !important;
    				}
    			}
    
    			a {
    				color: $color-irma-sky;
    
    				transition: all $transition;
    
    				&:hover, &:focus {
    					color: white;
    				}
    
    				strong {
    					color: inherit;
    				}
    			}
    		}
    	}
    }
  • URL: /components/raw/tooltip/_tooltip.scss
  • Filesystem Path: components/01-components/tooltip/_tooltip.scss
  • Size: 3.3 KB
  • Content:
    /* 
     *	_tooltip.js
     */
    
    irma.tooltip = (function () {
    	'use strict';
    
    	var noScroll = false,
    		scrollTop = 0,
    		allowRemove;
    
    	var removeAll = function () {
    		$('.js-tooltip').removeClass('-active');
    		$('.btn-action').removeClass('-active');
    
    		setTimeout(function () {
    			$('.js-tooltip').not('.-active').remove();
    		}, 300);
    	};
    
    	var init = function () {
    		$(document).on('click', '.js-tooltip', function (e) {
    			e.stopPropagation();
    
    		}).on('click', function () {
    			removeAll();
    
    		}).on('click', '.js-modal, .advanced-search-container', function () {
    			removeAll();
    
    		}).on('click', '.js-tooltip', function () {
    			removeAll();
    
    		}).on('keyup', function (e) {
    			if (e.which == 27 && $('.js-tooltip').length > 0) {
    				e.stopPropagation();
    				
    				removeAll();
    			}
    		}).on('blur', '.js-tooltip', function () {
    			removeAll();
    
    		}).on('scroll', function (e) {
    			if (!noScroll && e.originalEvent) {
    				removeAll();
    			}
    
    		}).on('mouseenter', '.tooltip', function () {
    			scrollTop = $('body').scrollTop();
    
    		}).on('mouseover', '.tooltip', function () {
    			noScroll = true;
    
    			clearTimeout(allowRemove);
    
    			$('html').addClass('-no-scroll');
    
    			$('.site-container').scrollTop(scrollTop);
    
    		}).on('mouseout', '.tooltip', function () {
    			$('html').removeClass('-no-scroll');
    
    			$('body').scrollTop(scrollTop);
    
    			allowRemove = setTimeout(function () {
    				noScroll = false;
    			}, 500);
    
    		}).on('click', '.tooltip a', function () {
    			$('html').removeClass('-no-scroll');
    
    			$('body').scrollTop(scrollTop);
    
    			allowRemove = setTimeout(function () {
    				noScroll = false;
    			}, 500);
    
    		});
    
    	};
    
    	return {
    		init: init,
    		removeAll: removeAll
    	};
    
    }());
  • URL: /components/raw/tooltip/tooltip.js
  • Filesystem Path: components/01-components/tooltip/tooltip.js
  • Size: 1.7 KB

There are no notes for this item.