stefan22
12/9/2017 - 6:03 PM
tooltip/popup full
entire tooltip/popup, fully responsive mobile, table and desktop including landscape mode.
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<title>
tooltip
</title>
<style type="text/css">
html,
body {
min-height: 100%;
}
html {
background: #a061ab;
overflow: hidden;
}
body {
position: relative;
}
header {
margin: 2em 0;
}
header h1 {
color: #ffffff;
letter-spacing: 1px;
text-align: center;
padding: 1em 0;
}
div#tooltip:after {
content: "";
position: absolute;
width: 0;
height: 0;
border-width: 26px;
border-style: solid;
border-color: transparent #ffffff transparent transparent;
top: -52px;
left: 295px;
transform: rotate(90deg);
background: transparent
}
@keyframes totip {
0% {
opacity: 0;
top: -200px
}
100% {
opacity: 1;
top: 80px
}
}
.face:hover {
animation: shake .82s cubic-bezier(.36, .07, .19, .97) both;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
perspective: 1000px
}
@keyframes shake {
10%,
90% {
transform: translate3d(-1px, 0, 0)
}
20%,
80% {
transform: translate3d(2px, 0, 0)
}
30%,
50%,
70% {
transform: translate3d(-4px, 0, 0)
}
40%,
60% {
transform: translate3d(4px, 0, 0)
}
}
.mode-name {
position: relative;
left: 0;
right: 0;
animation: nudge 2.5s ease;
animation-iteration-count: infinite;
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes nudge {
0% {
transform: translate(0, 0);
}
80% {
transform: translate(0, 0);
}
90% {
transform: translate(-10px, 0);
}
93% {
transform: translate(12px, 0);
}
95% {
transform: translate(-8px, 0);
}
100% {
transform: translate(0, 0);
}
}
.lowrapper {
animation-name: totip;
animation-duration: 1s;
position: absolute;
transition: top .5s, opacity .5s;
right: 180px;
top: 115px;
z-index: 20;
}
#tooltip {
animation: shake .82s cubic-bezier(.36, .07, .19, .97) both;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
perspective: 1000px;
width: 330px;
max-width: 330px;
background-color: #fff;
padding: 20px;
font-family: "FranklinGothicRegular", Arial, sans-serif
}
.toobottom {
margin-bottom: 20px;
}
.uno {
margin-right: 24px !important;
height: 28px !important;
}
.pone.phone {
background-color: #9a9997;
}
.tootop h1 {
font-size: 36px;
color: #823f90!important;
font-weight: bold!important;
text-align: center;
letter-spacing: -1px;
border-bottom: 1px solid #d6d6d6;
width: 98%;
margin: 0 auto;
padding: 10px 0 5px;
line-height: 46px;
}
.missu:before {
content: "★";
display: block;
line-height: 1;
font-size: 20px;
margin-top: -20px;
margin-bottom: 10px;
color: #ef0d3c;
-webkit-animation: spin 2.5s ease;
animation: spin 2.5s ease;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-transform-origin: center center;
transform-origin: center center;
}
.pone {
margin: 20px 0;
border: 1px solid #9a8a8a;
border-radius: 4px;
background-color: #823f90;
padding: 8px 24px;
font-weight: 100;
color: #ffffff;
-webkit-text-fill-color: currentColor;
cursor: pointer;
}
#tooltip .toobottom p.pnull {
color: #333;
font-size: 18px;
line-height: 24px;
text-align: center;
padding: 5px 0;
}
span.logcolor {
line-height: 30px;
text-align: left;
letter-spacing: .25px;
vertical-align: middle;
font-size: 16px;
font-weight: bold;
font-family: "FranklinGothicRegular", arial, sans-serif;
mix-blend-mode: luminosity;
}
.pone a {
text-decoration: none;
color: #fff!important;
letter-spacing: .5px;
font-size: 16px;
font-weight: 100;
line-height: 30px;
}
.toobottom p.pone:nth-child(3) {
margin-top: 0
}
.toobottom button {
background-color: #fbfbfb;
padding: 12px 5px;
color: #333;
border: 1px solid #c1c3c3;
font-size: 18px;
line-height: 22px;
text-align: center;
cursor: pointer;
width: 80%;
margin: 0 auto;
display: block;
cursor: pointer;
}
.toobottom button:focus,
.toobottom button:active {
outline: 0
}
img.chatup {
margin-right: 20px;
height: auto;
line-height: 30px;
vertical-align: middle;
display: inline-block;
mix-blend-mode: screen;
}
.tooltip {
opacity: 1 !important;
}
#tooltip,
.tootop,
.toobottom {
z-index: 10;
}
#header-id,
.js-header-navigation.header-navigation,
.site-body {
z-index: 150;
}
#tooltip {
border: 1px solid #e7e7e7;
border-radius: 4px;
box-shadow: 0px 1px 0 0px #9f9f9f;
}
span.logcolor a {
color: #333;
text-decoration: none;
}
.lowrapper {
right: 29%;
top: 80px;
}
#header-id {
position: relative;
}
.testa {
width: 200px;
margin: 0 auto;
display: block;
opacity: 0;
position: relative;
}
chawin {
width: 600px !important;
height: 700px !important;
bottom: 1% !important;
right: 1% !important;
}
button#vainow:hover {
color: #f7f6f7;
background: #823f8f;
}
button#vainow {
transition: background-color .3s, color .3s;
}
#ovrlay {
width: 100% !important;
height: 100% !important;
position: fixed;
animation-name: fadeIn;
animation-duration: 1s;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, .55);
z-index: 10;
transition: background-color 1s, top 1s;
}
@media screen and (max-width:320px) {
.lowrapper {
right: 0% !important;
top: 80px;
}
#tooltip {
width: 260px !important;
height: auto;
}
div#tooltip:after {
left: 215px;
}
.tootop h1 {
font-size: 30px;
}
.pone a {
letter-spacing: 0;
font-size: 14px;
}
}
@media screen and (max-width:414px) {
div.lowrapper {
right: 8%;
top: 80px;
}
div#tooltip {
width: 260px;
height: auto;
}
div#tooltip:after {
left: 215px;
}
.tootop h1 {
font-size: 30px;
}
.pone a {
letter-spacing: 0;
font-size: 14px;
}
}
@media screen and (max-width:425px) {
.lowrapper {
right: 5%;
top: 80px;
}
#tooltip {
width: 260px;
height: auto;
}
div#tooltip:after {
left: 215px;
}
.tootop h1 {
font-size: 30px;
}
.pone a {
letter-spacing: 0;
font-size: 14px;
}
}
/* //ipads portrait and landscape */
@media only screen and (min-device-width:768px) and (max-device-width:1366px) {
.lowrapper {
right: 10%;
top: 120px;
}
#tooltip {
width: 330px !important;
height: auto;
}
div#tooltip:after {
left: 215px;
}
.tootop h1 {
font-size: 30px;
}
.pone a {
letter-spacing: 0;
font-size: 14px;
}
}
@media screen and (min-width:1370px) {
.lowrapper {
right: 40% !important;
top: 120px !important;
}
#tooltip {
width: 330px !important;
height: auto;
}
div#tooltip:after {
left: 215px;
}
.tootop h1 {
font-size: 30px;
}
.pone a {
letter-spacing: 0;
font-size: 14px;
}
}
@media screen and (orientation:landscape) {
html {
overflow-y: auto;
}
.lowrapper {
right: 10%;
top: 80px;
}
#tooltip {
width: 260px;
height: auto;
}
div#tooltip:after {
left: 205px;
}
.tootop h1 {
font-size: 30px;
}
.pone a {
letter-spacing: 0;
font-size: 14px;
}
}
</style>
</head>
<body>
<header>
<h1>TOOLTIP</h1>
</header>
<div class="lowrapper">
<div id="tooltip">
<div class="tootop face">
<h1 class="mode-name missu"> We've Missed You </h1>
</div>
<div class="toobottom">
<p class="pnull">If you are unable to remember<br/> your login credentials<br/></p>
<p class="pone phone">
<a href="tel:08000831988"><img class="chatup uno" src="https://sb.monetate.net/img/1/748/1317576.png" width="30" height="30" />Call on <span class="logcolor">0800 111 222</span></a>
</p>
<p class="pone">
<a href="javascript://Chat" id="chawin" onclick="((liveagent !== 'undefined') ? liveagent.startChat('5730M000000IG3i') : alert('sorry liveAgent is not available at this time'))"><img class="chatup" src="https://sb.monetate.net/img/1/748/1312856.png" width="30" height="30" /> Click here to chat with us </a>
</p>
<button onclick="closar()" id="vainow"> I'm ok for now </button>
</div>
</div>
<script>
//going from ipad to mobile
if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) {
var viewportmeta = document.querySelector('meta[name="viewport"]');
if (viewportmeta) {
viewportmeta.content = 'width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0';
document.body.addEventListener('gesturestart', function() {
viewportmeta.content = 'width=device-width, minimum-scale=0.25, maximum-scale=1.6';
}, false);
}
}
//we've missed you.
var modeList = [
'normal',
'difference',
'exclusion',
'luminosity'
];
var elem = document.querySelector('.missu'),
propertyName = 'mix-blend-mode',
modeElem = document.querySelector('.mode-name');
var i = 0;
var missAction = setInterval(function() {
if (i == modeList.length) i = 0;
var mode = modeList[i];
elem.style.mixBlendMode = mode;
modeElem.innerText = "We've Missed You"
i++;
}, 2500);
//close popup
function closar() {
var lw = document.querySelector('.lowrapper');
lw.style.display = "none";
//close ovrlay
if (document.getElementById('ovrlay') !== null) {
var oy = document.getElementById('ovrlay').
style.opacity = 0;
//remove invis cause is being added below
document.getElementById('invis').parentElement.removeChild(document.getElementById('invis'));
} //if
} //fn closar
var olay; //overlay
document.addEventListener('DOMContentLoaded', function(e) {
//creates ovrly
olay = document.createElement('div');
olay.id = "ovrlay";
olay.className = "toptobottom";
//appends near body elem
var han = document.body.children[0];
han.parentElement.insertBefore(olay, han);
//sets opacity
olay.style.opacity = 1;
//sets window dimensions
olay.style.width = window.screen.width + "px";
olay.style.height = window.screen.height + "px";
}, false);
//onresize
window.addEventListener('resize', function(e) {
//reset new values first
olay.style.width = window.screen.width + "px";
olay.style.height = window.screen.height + "px";
}, false);
//clicking outside close popup -invisible div
var lowr;
lowr = document.querySelector('.lowrapper');
if ((lowr) && (lowr !== null)) {
//if popup is being displayed create invis div
var invis;
//invisible div
invis = document.createElement('div');
invis.id = "invis";
invis.className = "invis";
//set opacity/z-index
invis.style.opacity = 0;
invis.style.display = "hidden";
invis.style.zIndex = 10;
//sets window dimensions
invis.style.width = window.screen.width + "px";
invis.style.height = window.screen.height + "px";
//appends at bottom
document.body.appendChild(invis);
//click event
document.addEventListener('click', function(e) {
console.log(e);
e.preventDefault();
var orly;
//if clicking on invis div
if (e.target.className == "invis" || e.target.id == "ovrlay") {
//remove popup
lowr.style.display = "none";
//remove overlay
if (document.getElementById('ovrlay') !== null) {
orly = document.getElementById('ovrlay');
orly.style.opacity = 0;
}
} //if
}, false);
} //if
</script>
</body>
</html>