Positioning a popup

[ExternalUser1]

Hi, I am not a dev but I need to position a popup. I found what I need here: https://www.w3schools.com/css/css_positioning.asp I need the to position my popup as in the last link under section "position: absolute"...

div.relative {
position: relative;
width: 400px;
height: 200px;
border: 3px solid #73AD21;
}

div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}

The problem is that someone gave me the code bellow and it´s just 1 div, I think I need to created 2 div from it as it´s above but as I am not a dev I donot know how to do it. Bellow is my code...

If anyone could modify it in order for my popup to be ´position: absolute´ i would appreciate!

Thanks in advance!


<img class="img-responsive atto_image_button_text-bottom" onclick="showcontent1()" src="https:.../infopng-b.png?time=1607298509862" alt="" width="31" height="31" role="presentation">
<p></p>
<p></p>
<p></p>
<p></p>
<p><br><br></p>
<p></p>
<div id="contnt-img-1" class="tooltip-content" style="display: none; border: 4px solid orange; width: 380px; top: 88%; right: 17%; position: absolute; background-color: #fff; padding: .5em;"><button id="close-cnt1 " style="position: relative; background: none; border: none; top: -5px; right: -5px;" onclick="closecontent1(); return false; "> X </button>
<p>Popup content....</p>
</div>
<script type="text/javascript">
// <![CDATA[
function showcontent1() {
document.getElementById('contnt-img-1').style.display = 'block';
}

function closecontent1() {
document.getElementById('contnt-img-1').style.display = 'none';
return false;
}
// ]]>
</script>

 

[BigDady]

Hello ExternalUser1,
Because this is your second post I looked up your first. Are they (both of your posts) related? Your first post was about a "tool-tip" and that should be positioned deferential than a pop up to facility logging in.

I would have answered you back in Oct., but you posted under the Java section and I do not read that. And FYI your question has nothing to do with Java. JavaScript and Java are two different languages. As different as Ham and Hamburger.

The problem is that someone gave me the code bellow and it´s just 1 div,

That code is three centuries out of date. Easy to spot because it has
// <![CDATA[
and
// ]]>

And it has
<script type="text/javascript">

Anyway that code just turns the element with ID of contnt-img-1 on or off. It doesn't position anything.

What I need from you is what your positioning and where you want it positioned.
If it's a tool tip it should be attached to the word it is expanding.
If your HTML has the sentence: "That took place during the civil war." and you want to have a pop up that informs us what the civil war was when the user hovers over that word(s) that would be different then clicking a button that says Log-In.

So give me the HTML that triggers the pop up and the pop up itself.

 

[ExternalUser1]

me the HTML that triggers the pop up and the pop up itself.

Hi @BigDady,

Thanks a lot for your help, I use the code for a litle image button "i" and when you click in it a the popup shows up

I am not sure how to position the popup in a absolute position from the "i" button

Thanks again

 

[ExternalUser1]

me the HTML that triggers the pop up and the pop up itself.

Hi @BigDady,

Thanks a lot for your help, I use the code for a litle image button "i" and when you click in it a the popup shows up

I am not sure how to position the popup in a absolute position from the "i" button

Thanks again

 

[ExternalUser1]

Here is an screnshot...

 

[BigDady]

Again; Here is why it has taken you forever to get a solution to your problem
1.) You posted in the wrong area,
2.) You were looking for the wrong thing. Looking for info on POP-UP, but wanted info on a TOOLTIP.
3.) Did not post code. Even after I ask you for code you only gave half of it. Also note that a picture is not code.

The following came from https://www.w3schools.com/css/css_tooltip.asp. Go here for info on changing what I give you.

Here's a change -> You want to CLICK on something (word/phrase) show the tooltip and click on an X to get rid of the tip. This is cumbersome. I have done this with a hover. Tip appears when the word is hovered over and disappears when the cursor moves on. An automatic happening.

Everything is done via CSS. If you want the orange border, I leave that to you. I copy/pasted so this uses px. You should use em instead, but again - up to you to do.
W3Schools just has a word hung in air to hover over - I changed that to a word in a sentence in a paragraph.

<!DOCTYPE html>
<html lang='en'>

<head>
<title> Home Page </title>
<meta charset="utf-8">
<style>
/* Tooltip container */
.tooltip {
    position: relative;
    display: inline-block;
    color:blueviolet;
    border-bottom: 1px dotted blueviolet;
    cursor: pointer;
}
/* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 20em;
    background-color: black;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
    /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 1;
    bottom: 100%;
    left: 50%;
    margin-left: -10px; /* Use half of the width (120/2 = 60), to center the tooltip */   
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
    visibility: visible;
}
.tooltiptext::after {
    content: " ";
    position: absolute;
    top: 100%; /* At the bottom of the tooltip */
    left: 10px;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: black transparent transparent transparent;
}
</style>
</head>

<body>
<p>
    Tradition is a sacred thing in many if not all societies.<br>Lady Crimson violated a long
        <span class="tooltip"  class="tooltip">tradition
            <span class="tooltiptext">See [93] and [139] of the judgment</span>
        </span>
    by appearing in public wearing long, above the elbow, green gloves instead of the red gloves dictated by custom.<br>Tradition is a sacred thing in many if not all societies.
</p>
</body>
</html>

 

[ExternalUser1]

Thanks a lot for your help! I just want to change the code so the popup always stay close to the "i" image (I read that is position adsolute), and if the "i" image move then the poup will also move with it, so both are always close to each other.

I didn´t know the code is bad and old, but good to know, anyway I am not a dev I can´t do anything

Thanks for your help,

 

[BigDady]

The code I gave you does that. I used a word instead of an image. Do you want me to change that for you? Or do you see how things are done and can do it yourself?

 

[ExternalUser1]

Thanks a lot BigDady, the problem is that I need to enter that code in an html editor and for some reason when I copy and paste your code there and after save and see what is there I just see the next text ...
Home Page
Tradition is a sacred thing in many if not all societies.
Lady Crimson violated a long tradition See [93] and [139] of the judgmentby appearing in public wearing long, above the elbow, green gloves instead of the red gloves dictated by custom.
Tradition is a sacred thing in many if not all societies.

...but I do not see any button to click to show the tooltip?


----------------
Actually just now someone gave me the next code that is working in my editor and seems to do the job...

<div style="width: 100%; position: relative;">
<p style="text-align: left;">Text Tex text text text text text text text text.</p>

</div>
<div style="position: relative; width: 100%; display: flex; justify-content: center;"><img class="img-responsive atto_image_button_text-bottom" src="https://....infopng-b.png" alt="" width="31" height="31" role="presentation" onclick="document.getElementById('contnt-img-1').style.display = 'block';" />
<div id="contnt-img-1" class="tooltip-content" style="display: none; margin-top: 16px; border: 4px solid orange; background-color: #fff; padding: .5em; position: absolute; top: -120px;"><button id="close-cnt1 " style="position: relative; background: none; border: none;" onclick="document.getElementById('contnt-img-1').style.display = 'none'; return false; "> X </button>
<p>See [93] and [139] of the judgment.</p>
</div>
</div>

 

[ExternalUser1]

<div style="width: 100%; position: relative;">
<p style="text-align: left;">Text Tex text text text text text text text text.</p>

</div>
<div style="position: relative; width: 100%; display: flex; justify-content: center;"><img class="img-responsive atto_image_button_text-bottom" src="https://....infopng-b.png" alt="" width="31" height="31" role="presentation" onclick="document.getElementById('contnt-img-1').style.display = 'block';" />
<div id="contnt-img-1" class="tooltip-content" style="display: none; margin-top: 16px; border: 4px solid orange; background-color: #fff; padding: .5em; position: absolute; top: -120px;"><button id="close-cnt1 " style="position: relative; background: none; border: none;" onclick="document.getElementById('contnt-img-1').style.display = 'none'; return false; "> X </button>
<p>See [93] and [139] of the judgment.</p>
</div>
</div>

 

[BigDady]

You see this is the problem with using more then one help site. All my work is now crap. All my time is wasted. Have fun. Goodbye.
Clicking a buttomn and clicking again to close a tooltip is not user friendly. I told you that before.