<div class="tooltip js-modal" data-modal="tooltip">
    <div class="tooltip-inner">
        <div class="tooltip-content">
            <div class="tooltip-subheadline">
                <div class="text">Applied &amp; Awarded</div>
            </div>

            <div data-col="4" class="tooltip-row">
                <div data-span="3">Total Applied</div>
                <div data-span="1">
                    <strong data-money="720000"></strong>
                </div>
            </div>

            <div data-col="4" class="tooltip-row">
                <div data-span="3">Total Awarded</div>
                <div data-span="1">
                    <strong data-money="580000"></strong>
                </div>
            </div>

            <div class="tooltip-subheadline" data-col="4">
                <div class="text" data-span="2">Funder</div>
                <div class="text" data-span="1">Awarded</div>
                <div class="text" data-span="1">Remaining</div>
            </div>

            <div data-col="4" class="tooltip-row">
                <div data-span="2">
                    <a href="" title="" target="_blank">The Bank of New Zealand</a>
                </div>
                <div data-span="1" data-money="300000"></div>
                <div data-span="1">
                    <strong data-money="225000"></strong>
                </div>
            </div>

            <div data-col="4" class="tooltip-row">
                <div data-span="2">
                    <a href="" title="" target="_blank">The Foundation for Funding Super Awesome Projects</a>
                </div>
                <div data-span="1" data-money="280000"></div>
                <div data-span="1">
                    <strong data-money="210000"></strong>
                </div>
            </div>

            <div class="bottom-line" data-col="4">
                <div class="text" data-span="2">Total funding remaining for this&nbsp;project</div>
                <div data-span="2">
                    <strong data-money="435000"></strong>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="tooltip js-modal" data-modal="tooltip">
	<div class="tooltip-inner">
		<div class="tooltip-content">
			<div class="tooltip-subheadline">
				<div class="text">Applied &amp; Awarded</div>
			</div>

			<div data-col="4" class="tooltip-row">
				<div data-span="3">Total Applied</div>
				<div data-span="1">
					<strong data-money="720000"></strong>
				</div>
			</div>

			<div data-col="4" class="tooltip-row">
				<div data-span="3">Total Awarded</div>
				<div data-span="1">
					<strong data-money="580000"></strong>
				</div>
			</div>

			<div class="tooltip-subheadline" data-col="4">
				<div class="text" data-span="2">Funder</div>
				<div class="text" data-span="1">Awarded</div>
				<div class="text" data-span="1">Remaining</div>
			</div>

			<div data-col="4" class="tooltip-row">
				<div data-span="2">
					<a href="" title="" target="_blank">The Bank of New Zealand</a>
				</div>
				<div data-span="1" data-money="300000"></div>
				<div data-span="1">
					<strong data-money="225000"></strong>
				</div>
			</div>

			<div data-col="4" class="tooltip-row">
				<div data-span="2">
					<a href="" title="" target="_blank">The Foundation for Funding Super Awesome Projects</a>
				</div>
				<div data-span="1" data-money="280000"></div>
				<div data-span="1">
					<strong data-money="210000"></strong>
				</div>
			</div>

			<div class="bottom-line" data-col="4">
				<div class="text" data-span="2">Total funding remaining for this&nbsp;project</div>
				<div data-span="2">
					<strong data-money="435000"></strong>
				</div>
			</div>
		</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.