I've been using the w3school tooltip code to get a tooltip to appear after something has been clicked. I've managed to get the pop up to appear for every clickable item (in this case it's just some simple text) but the problem is that it always appear in the same spot. Rather than the tooltip appear right above the text that was clicked, it always appear above the first text.
<div class="popup" onclick="myFunction()">Click me to toggle the popup!
<span class="popuptext" id="myPopup">A Simple Popup!</span>
</div><br><br><br>
<div class="popup" onclick="myFunction()">Click me to toggle the popup!
<span class="popuptext" id="myPopup">A Simple Popup!</span>
</div> <br><br><br>
<div class="popup" onclick="myFunction()">Click me to toggle the popup!
<span class="popuptext" id="myPopup">A Simple Popup!</span>
</div><br><br><br>
<div class="popup" onclick="myFunction()">Click me to toggle the popup!
<span class="popuptext" id="myPopup">A Simple Popup!</span>
</div><br><br><br>
.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: 160px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: relative
z-index: 1;
bottom: 125%;
left: 50%;
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 ;}
}
function myFunction() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
}
Here's the link to the a jsfiddle with a working demo:
https://jsfiddle.net/codingcoder96/qcxshej0/
There are some mistakes in your code:
An element's ID attribute must be unique across the whole HTML page. In your code a lot of elements have the same ID.
I wouldn't use onclick="" - I'd add an eventListener in the JS code (it helps decoupling JS from HTML)
// "grabbing" the popups
const popups = document.querySelectorAll('.popup')
// adding a click eventListener to every popup container
popups.forEach(e => {
e.addEventListener('click', function(ev) {
togglePopup(this)
})
})
// getting the child of the container
// and toggling show class
function togglePopup(container) {
// [id^=myPopup] is a traditional CSS selector, that selects
// all elements whose ID begins with "myPopup"
// by calling querySelector on the container, we only look
// for elements that are child nodes of the container
// so the CSS selector is narrowed down to those elements
container.querySelector('[id^=myPopup]').classList.toggle('show')
}
.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: 160px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: relative z-index: 1;
bottom: 125%;
left: 50%;
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;
}
}
<div class="popup">Click me to toggle the popup!
<span class="popuptext" id="myPopup1">A Simple Popup! 1</span>
</div><br><br><br>
<div class="popup">Click me to toggle the popup!
<span class="popuptext" id="myPopup2">A Simple Popup! 2</span>
</div><br><br><br>
<div class="popup">Click me to toggle the popup!
<span class="popuptext" id="myPopup3">A Simple Popup! 3</span>
</div><br><br><br>
<div class="popup">Click me to toggle the popup!
<span class="popuptext" id="myPopup4">A Simple Popup! 4</span>
</div><br><br><br>
Related
I new to the html and css. I am now learning about the pop up and have come across an issue.
Check out this simple fiddle:
https://jsfiddle.net/74agLucr/
function myFunction() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
}
.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: 160px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
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 {
opacity: 0;
/* add this */
visibility: visible;
-webkit-animation: fadeIn 3s;
animation: fadeIn 3s;
}
#-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#keyframes fadeIn {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
<h2>Popup</h2>
<div class="popup" onclick="myFunction()">Click me to toggle the popup!
<span class="popuptext" id="myPopup">A Simple Popup!</span>
</div>
When you click on the text, the pop up shows up and disappears shortly. When clicked again, it will not do anything. I must click twice for it to pop up again. Could someone point me in the right direction and help me understand what is the issue?
The problem with the popup is that toggle adds a class if it isn't added and removes if already was added. That's why you have to click twice in order for it to work. You can try setting setTimeout() so it toggles off after 3 second animation.
function myFunction() {
var popup = document.getElementById("myPopup");
if(!popup.classList.contains("show")){
popup.classList.add("show");
setTimeout(()=>{popup.classList.remove("show");}, 3000);
}
}
i am trying to implement 03 popup on my page but unable to do so. i am trying to achieve this by assigning different ID to each popup. any help is highly appreciated. Here is my code
CSS:
.fa {
font-size: 50px;
cursor: pointer;
user-select: none;
}
.fa:hover {
font-size:20px;
transition: 1s ease-out;
}
/* 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: 160px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
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 ;}
}
Here is my HTML:
<div class="popup" onclick="myFunction()"><i onclick="myFunctions(this)" class="fau fa fa-plus-circle"></i>
<span class="popuptext" id="myPopup">A Simple Popup!</span>
</div>
MY JS Code:
// When the user clicks on div, open the popup
function myFunction() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
}
function myFunctions(x) {
x.classList.toggle("fa-times-circle");
}
Here i am trying to apply 2nd popup:
<div class="popup" onclick="myFunction()"><i onclick="myFunctions(this)" class="fau fa fa-plus-circle"></i>
<span class="popuptext" id="myPopup2">A Simple Popup 2</span>
</div>
<script>
function myFunction() {
var popup = document.getElementById("myPopup2");
popup.classList.toggle("show");
}
</script>
and same for popup three. i am stuck here. Thanks in advance
You can't create more than one function with the same name. However, one solution is create a reusable function and pass the clicked element to it. Then on your popup div also add a data attribute called data-target that holds the ID of the popup you want to open.
For example:
<div class="popup" data-target="myPopup" onclick="myFunction(this)">
or
<div class="popup" data-target="myPopup2" onclick="myFunction(this)">
Then you will only need the below single function, you won't have to duplicate it.
function myFunction(el){
var popup = document.getElementById(el.dataset.target);
popup.classList.toggle("show");
}
I used this tutorial to add popups to my webpage. Is there a way to make it so a popup closes when you click outside it/click on a different one.
I've tried adding an invisibleDiv as per this post Close pop up div by clicking outside of it but the popup is still only moving when the button itself is clicked.
https://www.w3schools.com/howto/howto_js_popup.asp
// When the user clicks on div, open the popup
function myFunction() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
}
/* 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: 160px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
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 ;}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body style="text-align:center">
<h2>Popup</h2>
<div class="popup" onclick="myFunction()">Click me to toggle the popup!
<span class="popuptext" id="myPopup">A Simple Popup!</span>
</div>
</body>
</html>
Having a global click-handler that checks the clicked element's classList is one way to close the pop-up when clicking outside of it. Here is an example:
const popups = [...document.getElementsByClassName('popup')];
window.addEventListener('click', ({ target }) => {
const popup = target.closest('.popup');
const clickedOnClosedPopup = popup && !popup.classList.contains('show');
popups.forEach(p => p.classList.remove('show'));
if (clickedOnClosedPopup) popup.classList.add('show');
});
/* 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: 160px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
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 .popuptext {
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 ;}
}
<h2>Popup</h2>
<div class="popup">Click me to toggle the popup!
<span class="popuptext">A Simple Popup!</span>
</div>
<div class="popup">Click me to toggle the popup!
<span class="popuptext">A Simple Popup!</span>
</div>
Add an onclick to the popup's container and stop event propagation on all internal elements you don't want to trigger the action.
let popup = document.querySelector(".popup");
function toggle(e) {
e.stopPropagation();
popup.classList.toggle("hide");
}
function closePopup() {
if (!popup.classList.contains("hide")) {
popup.classList.toggle("hide");
}
}
body {
margin: 0;
}
.container {
width: 100vw;
height: 100vh;
background: lightgray;
display: flex;
flex-direction: column;
justify-content: center;
}
.popup {
width: 100px;
height: 100px;
background: white;
margin: 0 auto;
}
button {
position: fixed;
top: 0;
}
.hide {
display: none;
}
<div class="container" onclick="closePopup()">
<div class="popup hide" onclick="event.stopPropagation()"> </div>
<Button onclick="toggle(event)">Toggle</Button>
</div>
PHP
<?php
echo '<div>Display Content</div>';
echo '<div id="viewcontent"></div>';
?>
Script
Fill the generated content to the inside div
function showcontents()
{
var content = 'Add dynamic content';
$('#viewcontent').html(content);
}
Empty the div content by clicking outside div
$("body").click(function(e)
{
var contentlength = $("#viewcontent").text().length;
if(contentlength > 0 && e.target.id != 'btnshow'){
$('#viewcontent').html("");
}
}
I'm trying to display a popup using JavaScript, however, the div with class="popup" is the only thing that is currently being displayed. Both popup and popup2 should be displayed when the user performs an action. I'm not sure what I'm doing wrong.
HTML:
<div class="popup">
<span class="popuptext" id="popup"></span>
</div>
<div class="popup2">
<div class="popup2text" id="popup2"></div>
<script src="/popup2.js"></script>
</div>
JavaScript:
$(() => {
$('#enter').on('keypress', function(e) {
if (e.keyCode == 13) {
const newTask = $(this).val();
if (newTask) {
The above section of the javascript can be ignored
var popup = document.getElementById("popup");
popup.classList.toggle("show");
var popup2 = document.getElementById("popup2");
popup2.classList.toggle("show");
}
}
});
});
CSS:
.popup {
position: relative;
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.popuptext {
visibility: hidden;
width: 160px;
height: 200px;
background-color: #131313;
color: #fff;
opacity: 0.95;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
left: 581px;
top: 180px;
margin-left: -80px;
}
.popup .show {
visibility: visible;
-webkit-animation: fadeIn 0.5s;
animation: fadeIn 0.5s;
}
#-webkit-keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}
#keyframes fadeIn {
from {opacity: 0;}
to {opacity:1 ;}
}
#popup2 {
visibility: hidden;
color: white;
font-family: 'Quicksand', sans-serif;
font-size: 50px;
top: 50px;
left: 50px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#popup2 .show {
visibility: visible;
-webkit-animation: fadeIn 0.5s;
animation: fadeIn 0.5s;
}
Your HTML code is invalid.
Change this
<div class="popup">
<span class="popuptext" id="popup"></span>
</div>
<div class="popup2"></div>
<div class="popup2text" id="popup2"></div>
<script src="/popup2.js"></script>
</div>
to this
<div class="popup">
<span class="popuptext" id="popup"></span>
</div>
<div class="popup2">
<div class="popup2text" id="popup2"></div>
<script src="/popup2.js"></script>
</div>
I think you should check your css, As it shouldn't be ".popup .show" and "#popup2 .show", instead it should be "#popup.show" and "#popup2.show". Then I saw you have given css for ".popup" and not for ".popup2", css for "#popup2" but not for "#popup", similarly you have given css for ".popuptext" and not for ".popup2text".
Also Can you please ellaborate exact behaviour you want on page. Before user enter anything and after user enter something.
I have the following html and would like to wrap a table cell (1x1, with length and width easily editable) around the onclick function pop-up.
This includes HTML, CSS, and JavaScript.
This may eventually include several columns in one row, with multiple popups, so if possible please make this adaptable.
// When the user clicks on div, open the popup
function myFunction901() {
var popup901 = document.getElementById("myPopup901");
popup901.classList.toggle("show901");
}
/* Popup container - can be anything you want */
.popup901 {
position: relative;
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-decoration: none;
color: #feb330;
"
}
/* The actual popup */
.popup901 .popuptext901 {
visibility: hidden;
width: 160px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -31px;
}
/* Popup arrow */
.popup901 .popuptext901::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 */
.popup901 .show901 {
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;
}
}
<h1> </h1>
<h2> </h2>
<h3> </h3>
<h4> </h4>
<h5> </h5>
<h6> </h6>
<div class="popup901" onclick="myFunction901()"> Teams
<span class="popuptext901" id="myPopup901">2016, 2018: 22</span>
</div>
I don't know if is the best way, but i was able to do it declaring "n" inside your function,
function myFunction901(n) {
then for each onclick function in each popup you assing a number,
example:
onclick="myFunction901(1)"
lastly in your function i wrote the element id get as:
var popup901 = document.getElementById("myPopup90"+n);
so it reads that number and get the matching id.
You can then style the popup area with css to make em as you want (more square like etc.).
Check the code below:
<html>
<head>
<style>
/* Popup container - can be anything you want */
.popup901 {
position: relative;
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-decoration: none;
color:#feb330;"
}
/* The actual popup */
.popup901 .popuptext901 {
visibility: hidden;
width: 160px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -31px;
}
/* Popup arrow */
.popup901 .popuptext901::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 */
.popup901 .show901 {
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 ;}
}
</style>
</head>
<body>
<h1> </h1>
<h2> </h2>
<h3> </h3>
<h4> </h4>
<h5> </h5>
<h6> </h6>
<table>
<tbody>
<tr>
<td>
<div class="popup901" onclick="myFunction901(1)"> Teams
<span class="popuptext901" id="myPopup901">2016, 2018: 22</span>
</div>
</td>
<td>
<div class="popup901" onclick="myFunction901(2)"> Teams
<span class="popuptext901" id="myPopup902">2016, 2018: 22</span>
</div>
</td>
<td>
<div class="popup901" onclick="myFunction901(3)"> Teams
<span class="popuptext901" id="myPopup903">2016, 2018: 22</span>
</div>
</td>
<td>
<div class="popup901" onclick="myFunction901(4)"> Teams
<span class="popuptext901" id="myPopup904">2016, 2018: 22</span>
</div>
</td>
</tr>
</tbody>
</table>
<script>
// When the user clicks on div, open the popup
function myFunction901(n) {
var popup901 = document.getElementById("myPopup90"+n);
popup901.classList.toggle("show901");
}
</script>
</body>
</html>
is this what you meant?