How to dynamically display a popup

[Mr.M]

Hi DW.

I'm trying to display a popup over an input box, but the issue is that some websites that I want to also display on have div class name that contains many classes in it which result it a div class name to have spaces in it which is not a problem.

I would have used id for this but the issue is that some site doesn't have the ids. if you would take the facebook sample code:

<div class="_6lux">
<div class="_6luy _55r1 _1kbt" id="passContainer">
<input type="password" class="inputtext _55r1 _6luy _9npi" name="pass" id="pass" data-testid="royal_pass" placeholder="Password" aria-label="Password" />
<div class="_9ls7" id="u_0_b_sX">
<a href="#" role="button">
<div class="_9lsa">
<div class="_9lsb" id="u_0_c_3V">
</div>
</div>
</a>
</div>
</div>
</div>

So with the above what I want is to get the div with class _6lux because this work if I use that div but if I use any element inside that div it doesn't work correctly. The popup I want to show on a password field of that particular open website is Popup source link

Now if you also take Daniweb as another example code is

<div class="form-group">

<label for="password901886946" class="control-label d-none">Password</label>

<input type="password" class="form-control" id="password901886946" name="password" placeholder="Password">

</div>

And for Daniweb it work correctly with this div with class form-group. What I'm trying to do is to be able to dynamically locate the correct div that will correctly display this popup over the password field. I inject the same css code from the above link to the open website then also inject

var popup = document.getElementById("mypopup");
  popup.classList.toggle("show");

which triggers to display or hide the popup. My full css and dynamic selecting of the div code is

var inputs = document.getElementsByTagName('input');
    var dynamicclass;

for(var i = 0; i < inputs.length; i++) {
    if(inputs[i].type.toLowerCase() == 'password') {
        // Trying to get the id of this element
         var eid = inputs[i].id
         parentDiv = inputs[i].parentNode;//.className;

        if(parentDiv.className.includes(" ")){
        // Here was trying to switch from class to ID of the actual field but it doesn't work
        dynamicclass = "#"+inputs[i].id;
        }else{
            dynamicclass = "."+parentDiv.className;
        }
    }
}


    document.getElementsByTagName('head')[0].insertAdjacentHTML("beforeend","<style>"+dynamicclass+" {position: relative;display: inline-block;cursor: pointer;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}"+dynamicclass+" .popuptext {visibility: hidden;width: 160px;background-color: #555;color: red;text-align: center;border-radius: 6px;padding: 8px 0;position: absolute;z-index: 1;bottom: 125%;left: 50%;margin-left: -80px; backgroundColor: red;}"+dynamicclass+" .popuptext::after {content: '';position: absolute;top: 100%; left: 50%;margin-left: -5px;border-width: 5px;border-style: solid;border-color: #555 transparent transparent transparent;}"+dynamicclass+" .show {visibility: visible;-webkit-animation: fadeIn 1s;animation: fadeIn 1s;}@-webkit-keyframes fadeIn {from {opacity: 0;} to {opacity: 1;}}@keyframes fadeIn {from {opacity: 0;}to {opacity:1 ;}}</style>");

document.getElementById(eid).insertAdjacentHTML("beforebegin","<span class='popuptext' id='mypopup'>A Simple Popup!</span>");

The above work well with Daniweb. So my question is how can I make this work for all websites which I also don't know but it would be best if this can work on the majority of the websites.

[Mr.M]

I see that basically what I want is called tooltip but on w3c school on the link it's called popup..

[Dani]

I see that basically what I want is called tooltip but on w3c school on the link it's called popup..

Tooltips typically automatically show when hovering over an element and then autohide when the mouse cursor moves away. Popups tend to be a tiny bit more elaborately styled and can be triggered by click or hover.

That being said, I sincerely apologize. I'm confused what you're tryng to do. There has to be some heuristic you want to trigger on. You can trigger on a specific ID. You can trigger on a specific class. If you do something such as document.getElementsByClassName("example"); then it will trigger on elements that have class="foo bar example" as well as class="foo example" as well as class="example". In other words, it's smart enough to know that all three elements have the class name example, some with additional class names as well.

Does that answer your question?

[Mr.M]

Hi Dani, thanks.

As to what I'm trying to do is to automatically show a tooltip(popup) on a password field. I have an extension which is the one that triggers this popup and also inject the required code foe the popup to that particular website.

The code I supplied above get the elements by class but it doesn't show the popup correctly (styled with css) if the div has many class names in it, it only work if the div has one class name.

Another issue is that it work for Facebook with the 3rd upper div container of the password field, but with Daniweb it work with the first div of the password field so that also another issue.

I've got another code to try using the actual tooltip but style it through CSS and see if it will work on these sites and other sites as it should.

[Mr.M]

What my code does is that it first get the password field element then get it parent div class name, it then take that cass name as is and write it on CSS to reference it, so if the name has many name and spaces the actual style of ths popup won't work.

[john_111]

If you are trying to do this on a site you are building, why do you keep talking about other websites? It is not totally clear what you are trying to do, to be honest.
Try searching on things like tooltip js or tooltip wordpress or whatever.
Have a read of this https://www.appcues.com/blog/73-tooltip-plugins-made-with-jquery-css-javascript-or-more
it's for a normal website and was one of many such sets that tooltip js turned up. There are many, many reviews of sets of plugins that do this for wordpress as well.

[Mr.M]

@Dani, have you done any changes to the website? I tried about 3 times replying but when I was adding code and click insert button the pass was refreshing and everything was gone so after 3 attempts I continued with my test on my project.

@John_111, no I'm not doing this on my website, it was going to be easy if it was mine, but I have an extension that will do this to other websites. The aim is to show an alert tooltip to a user about that field.

I've found the solution this was what I was looking for now the issue is that on Facebook website it shows well but on other sites like Daniweb as I've also tested on it, the problem is that it is cutted at the bottom of the tooltip and the text is not fully visible as some part of it are cutted. I will try to upload images so you can see how it displays on Facebook and how it displays on Daniweb and at my website.

[Mr.M]

Daniweb

Facebook

My website

Here are the screenshots

[Dani]

@Dani, have you done any changes to the website?

No, I haven't made any changes today, and nothing that should affect login. Are you sure you are currently logged in? Try clearing your daniweb.com cookies and then logging back into DaniWeb.

Regarding the screenshots, you want to set the z-index CSS parameter of your popup. You will also want to allow overflow. This can also depend on who the parent <div> of the tooltip is. For example, suppose you have the tooltip dynamically inserted within the login section. My website might have code that limits the login section to a specific number of pixels and doesn't allow the tooltip to outgrow that. When trying to get it to work across all sites, you'll typically want to make this the <body> and then absolutely position the element exactly where you want it on the page.

[Mr.M]

I tried but it offset. On facebook it almost display by the edge of the screen on the left hand side, on my site and Daniweb it not visible and I think it outside the screen when using the body tag to be relative. NB: I'm not too familier with CSS

[bdata-tip] {
    position:relative;

}
[bdata-tip]:before {
    content:'';
    /* hides the tooltip when not hovered */
    display:none;
    content:'';
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid red;   
    position:absolute;
    top:30px;
    left:35px;
    z-index:8;
    font-size:0;
    line-height:0;
    width:0;
    height:0;
    overflow:auto;
}
[bdata-tip]:after {
    display:none;
    content:attr(bdata-tip);
    position:absolute;
    top:35px;
    left:0px;
    padding:5px 8px;
    background:red;
    color:#fff;
    z-index:9;
    font-size: 0.75em;
    height:18px;
    line-height:18px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    white-space:nowrap;
    word-wrap:normal;
    overflow:auto;
}
[bdata-tip]:hover:before,
[bdata-tip]:hover:after {
    display:block;
}