<div class="tooltip js-modal" data-modal="tooltip">
<div class="tooltip-inner">
<div class="tooltip-content">
<div class="tooltip-subheadline">
<div class="text">Applied & 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 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 & 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 project</div>
<div data-span="2">
<strong data-money="435000"></strong>
</div>
</div>
</div>
</div>
</div>
/* No context defined for this component. */
.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;
}
}
}
}
}
/*
* _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 = $(window).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");
$(window).scrollTop(scrollTop);
allowRemove = setTimeout(function() {
noScroll = false;
}, 500);
})
.on("click", ".tooltip a", function() {
$("html").removeClass("-no-scroll");
$(window).scrollTop(scrollTop);
allowRemove = setTimeout(function() {
noScroll = false;
}, 500);
});
};
return {
init: init,
removeAll: removeAll
};
})();
There are no notes for this item.