<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="absCenter"> <button class="infoButton"> <div class="infoButton-btn"> <span class="infoButton-btn-text">i</span> </div> <div class="infoButton-container"> <div class="infoButton-container-message">This is a message about the thing that you need to know.</div> </div> </button> </div> <script> // JS for thumbnail presentation only let mouseMoved = false; const button = document.querySelector('.infoButton'); const mouseMoveHandler = event => { clearInterval(loop); document.onmousemove = null; button.classList.remove('infoButton_isActive'); }; const toggleHandler = event => { const classes = button.classList; if (classes.contains('infoButton_isActive')) { classes.remove('infoButton_isActive'); } else { classes.add('infoButton_isActive'); } } document.onmousemove = mouseMoveHandler; const loop = setInterval(toggleHandler, 1000); </script>

@import url("https://fonts.googleapis.com/css?family=Montserrat:400,700"); body { font-family: 'Montserrat', sans-serif; font-weight: 400; background-color: #F6F6F6; height: 100vh; } *:focus { outline: none; } .absCenter { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .infoButton { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 0; background-color: transparent; padding: 0; margin: 0; font-size: 14px; position: relative; } .infoButton-btn { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: transparent; border: 1px solid red; border-radius: 10px; width: 20px; height: 20px; color: red; background-color: white; font-weight: 700; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transition: border-radius 200ms ease-in-out; transition: border-radius 200ms ease-in-out; } .infoButton-btn-text { display: block; text-align: center; width: 20px; height: 20px; line-height: 20px; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .infoButton-container { position: absolute; bottom: calc(-100% + 60px); right: 0; margin-right: -90px; -webkit-transform: scale(0); transform: scale(0); -webkit-transition: -webkit-transform 0ms linear 200ms; transition: -webkit-transform 0ms linear 200ms; transition: transform 0ms linear 200ms; transition: transform 0ms linear 200ms, -webkit-transform 0ms linear 200ms; } .infoButton-container-message { box-sizing: border-box; width: 200px; padding: 16px 20px; font-size: 14px; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.26); border-radius: 4px; line-height: 1.3; text-align: left; -webkit-transform: translateY(10px); transform: translateY(10px); opacity: 0; -webkit-transition: opacity 200ms ease-in-out, -webkit-transform 200ms ease-in-out; transition: opacity 200ms ease-in-out, -webkit-transform 200ms ease-in-out; transition: transform 200ms ease-in-out, opacity 200ms ease-in-out; transition: transform 200ms ease-in-out, opacity 200ms ease-in-out, -webkit-transform 200ms ease-in-out; background-color: white; } .infoButton:focus .infoButton-btn, .infoButton_isActive .infoButton-btn { border-top-right-radius: 0; -webkit-transition: border-radius 200ms ease-in-out; transition: border-radius 200ms ease-in-out; background-color: red; color: white; } .infoButton:focus .infoButton-container, .infoButton_isActive .infoButton-container { -webkit-transform: scale(1); transform: scale(1); -webkit-transition: -webkit-transform 0ms linear; transition: -webkit-transform 0ms linear; transition: transform 0ms linear; transition: transform 0ms linear, -webkit-transform 0ms linear; } .infoButton:focus .infoButton-container-message, .infoButton_isActive .infoButton-container-message { -webkit-transform: translate(0); transform: translate(0); opacity: 1; }