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

        <div class="tooltip-content">
            <div class="tooltip-subheadline">
                <div class="text">Funding: 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=""></strong>
                </div>
            </div>

            <div data-col="4" class="tooltip-row">
                <div data-span="3">Total Awarded</div>
                <div data-span="1">
                    <strong data-money=""></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 class="bottom-line" data-col="4">
                <div class="text" data-span="2">Total funding remaining for this&nbsp;researcher</div>
                <div data-span="2">
                    <strong data-money=""></strong>
                </div>
            </div>

            <div class="tooltip-subheadline">
                <div class="text">Researcher Details</div>
            </div>

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

		<div class="tooltip-content">
			<div class="tooltip-subheadline">
				<div class="text">Funding: 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="{{ totalApplied }}"></strong>
				</div>
			</div>

			<div data-col="4" class="tooltip-row">
				<div data-span="3">Total Awarded</div>
				<div data-span="1">
					<strong data-money="{{ totalAwarded }}"></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>

			{{#each funders }}
				<div data-col="4" class="tooltip-row">
					<div data-span="2">
						<a href="{{ slug }}" title="" target="_blank">{{ title }}</a>
					</div>
					<div data-span="1" data-money="{{ awarded }}"></div>
					<div data-span="1">
						<strong data-money="{{ remaining }}"></strong>
					</div>
				</div>
			{{/each}}

			<div class="bottom-line" data-col="4">
				<div class="text" data-span="2">Total funding remaining for this&nbsp;researcher</div>
				<div data-span="2">
					<strong data-money="{{ totalRemaining }}"></strong>
				</div>
			</div>

			<div class="tooltip-subheadline">
				<div class="text">Researcher Details</div>
			</div>

			{{#each details }}
				<div data-col="3" class="tooltip-row tooltip-details">
					<div data-span="1">{{ name }}</div>
					<div data-span="2"><strong>{{ value }}</strong></div>
				</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 = $(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
      };
    })();
    
  • URL: /components/raw/tooltip/tooltip.js
  • Filesystem Path: components/01-components/tooltip/tooltip.js
  • Size: 1.9 KB

There are no notes for this item.