<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <popup-info img="https://images.pexels.com/photos/1694980/pexels-photo-1694980.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" text="Beautiful pexels image. For more ,please search https://www.pexels.com"></popup-info>
    <script>
        class PopUpInfo extends HTMLElement{
            constructor(){
                super();
                let shadow = this.attachShadow({mode:'open'});
                let wrapper = document.createElement('div');
                wrapper.setAttribute('class','wrapper');
                let icon = document.createElement('div');
                icon.setAttribute('class','icon');
                let info = document.createElement('div');
                info.setAttribute('class','info');

                let text = this.getAttribute('text');
                info.textContent = text;

                let imgUrl = '';
                if(this.hasAttribute('img')){
                    imgUrl = this.getAttribute('img');
                }

                let img = document.createElement('img');
                img.src = imgUrl;
                icon.appendChild(img);

                //添加样式
                let style = document.createElement('style');
                style.textContent = `
                    .wrapper{
                        position:relative;
                        width:200px;
                    }
                    .info{
                        font-size:12px;
                        width:200px;
                        display:inline-block;
                        border:1px solid black;
                        padding:10px;
                        background:white;
                        border-radius:10px;
                        opacity:0;
                        transition:.6s all;
                        position:absolute;
                        top:0;
                        left:105%;
                        z-index:3;
                        word-break:break-all;
                    }


                    img{
                        width:200px;
                    }

                    .icon:hover + .info,.icon:focus + .info{
                        opacity: 1;
                    }
                
                `;

                shadow.appendChild(style);
                shadow.appendChild(wrapper);
                wrapper.appendChild(icon);
                wrapper.appendChild(info);
            }
        }
        customElements.define('popup-info', PopUpInfo);
    </script>
</body>
</html>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.