Add a Popup Text Bubble

What does this code do?

This code snippet will allow you have text popup in a bubble on hover or when clicked.

Popup on Click

Use the following code snippets to have the popup show when text is clicked.

Code Block

Copy and paste this code into a Code Block on the page you would like the popup.

<div class="popup" onclick="popup()">Visible text here.
  <span class="popuptext" id="myPopup">Popup text here.</span>
</div>

Then customize the visible text and the popup text.

CSS

Copy and paste this code into Design > Custom CSS.

/* Popup container */
.popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
  text-decoration: underline; /*places an underline on visible text */
}

.popup .popuptext {
  visibility: hidden;
  background-color: black; /*color of the popup*/
  color: white; /* color of the popup text */
  text-align: center;
  padding: 10px; /*spacing between text and border of popup */
  border-radius: 5px; /*rounds the edges of the popup */
  position: relative;
  bottom: 40px; /* moves the popup upwards */
  right: 50%;
}

/* Popup Bubble Triangle */
.popup .popuptext::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  bottom: -8px;
  right: calc(50% - 4px);
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid black;
}

.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}

/* Fade in the PopUp */
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

Then customize the popup color and positioning.

Javascript

Copy and paste this code into Settings > Advanced > Code Injection > Footer.

<!-- Pop up Text -->
<script>
function popup() {
  var popup = document.getElementById("myPopup");
  popup.classList.toggle("show");
}
</script>

Popup on Hover

Use the following code snippets to have the popup show when text is hovered over.

Code Block

Copy and paste this code into a Code Block on the page you would like the popup.

<div class="popup">Visible text here.
  <span class="popuptext" id="myPopup">Popup text here.</span>
</div>

Then customize the visible text and the popup text.

CSS

Copy and paste this code into Design > Custom CSS.

/* Popup container */
.popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
  text-decoration: underline; /*places an underline on visible text */
}

.popup .popuptext {
  visibility: hidden;
  background-color: black; /*color of the popup*/
  color: white; /* color of the popup text */
  text-align: center;
  padding: 10px; /*spacing between text and border of popup */
  border-radius: 5px; /*rounds the edges of the popup */
  position: relative;
  bottom: 40px; /* moves the popup upwards */
  right: 50%;
}
.popup:hover .popuptext {
  visibility: visible;
}

/* Popup Bubble Triangle */
.popup .popuptext::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  bottom: -8px;
  right: calc(50% - 4px);
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid black;
}

/* Fade in the PopUp */
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

Then customize the popup color and positioning.

How To Use It

1. Copy and paste the code as indicated above.

2. Customize the popup color and positioning.