I currently have a situation where a popup appears at the top when a user hovers over a link or text. However, the issue is that the popup is not fully visible on the screen. The top part of the popup seems to be hidden in the browser. My application uses twitter-bootstrap. Is there a way to make the popup appear on the right side of the element rather than on top?
function displayPopup(element) {
elements = $(".popuptext")
$.each(elements, function(i, e) {
e.classList.remove("show");
})
popup_id = $(element).attr("data-popup-id")
var popup = document.getElementById(popup_id);
popup.classList.add("show");
}
function hidePopup(element) {
popup_id = $(element).attr("data-popup-id")
var popup = document.getElementById(popup_id);
popup.classList.remove("show");
popup.classList.add("hide");
}/* Popup container - can be anything you want */
.popup {
position: relative;
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* The actual popup */
.popup .popuptext {
visibility: hidden;
width: 350px;
background: #ffffff;
color: #585858;
text-align: center;
border-radius: 6px;
border: solid 1px black;
padding: 8px 0;
position: absolute;
z-index: 1;
bottom: 125%;
/*left: 100px;*/
margin-left: -80px;
}
/* Popup arrow */
.popup .popuptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
/* Toggle this class - hide and show the popup */
.popup .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}
/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="popup">
<a href="/my-link" data-popup-id="popup-c5e1e2c5" onmouseenter="displayPopup(this)">Hover Over this text</a>
<span class="popuptext show" data-popup-id="popup-c5e1e2c5" id="popup-c5e1e2c5" onmouseleave="hidePopup(this)">
My Entire content
</span>
</div>Your assistance in solving this issue would be greatly appreciated. Thank you.