title: How to make a hover effects like Wikipedia and Facebook
body: <p>I am trying to make a hovercard effect using SVG and JavaScript such as Wikipedia and Facebook. 
  but how to fix the top triangle position when hovering on elements.
  I need to fix the triangle position and the hovering action like Wikipedia or facebook.
  (NOTE: I have some problem in my css and js link. I am a new programmer, I want to learn more), Sorry for that.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
      &lt;title&gt;Wikipedia Hover Effects&lt;/title&gt;
  
  
      &lt;style&gt;
         .content {
   
  
   font-family: Segoe UI;
    border: 1px solid #ddd;
    padding: 30px;
    box-sizing: border-box;
    line-height: 27px;
  }
  
  .v-content-modal {
    position: absolute;
    background: #fff;
    box-shadow: 0 3px 20px 0 #ddd;
    width: 350px;
    border-top: 3px solid #ddd;
    display: none;
    box-sizing: border-box;
  }
  
  .v-content-modal .modal-title {
    background: #f5f5f5;
    padding: 0 1.25rem;
    font-size: .95rem;
    letter-spacing: .03rem;
    line-height: 38px;
    height: 35px;
    border-bottom: 1px solid #ddd;
  
  
  }
  
  .v-content-modal .modal-content {
    padding: 1.75rem 1.25rem;
  }
  
  .v-content-modal::before {
    content: "";
    position: absolute;
    top: -23px;
    left: 30px;
    border: 10px solid transparent;
    border-color: transparent transparent #ddd transparent;
  }
      &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  
  
      &lt;div class="content"&gt;
          Lorem ipsum dolor sit amet &lt;a href="#" data-title="One" data-content="I am the first one/" id="info"&gt;One&lt;/a&gt;
          adipisicing elit. Quisquam, modi neque! Cupiditate itaque vitae aliquid
          &lt;a href="#" data-title="Two" data-content="I am the Second one/" id="info"&gt;Two&lt;/a&gt;,
          pariatur qui sequi minima voluptates voluptatibus quae
          nemo! Suscipit &lt;a href="#" data-title="Three" data-content="I am the Third one/" id="info"&gt;Three&lt;/a&gt; quibusdam
          dignissimos vitae, cum cumque voluptates et hic doloribus dicta, &lt;a href="#" data-title="Four"
              data-content="I am the Forth one/" id="info"&gt;Four&lt;/a&gt; quos,
          nostrum in.
      &lt;/div&gt;
  
      &lt;div class="v-content-modal"&gt;
          &lt;div class="modal-title"&gt;
              Title
          &lt;/div&gt;
          &lt;div class="modal-content"&gt;
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo, quam.
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script&gt;
  $(function () {
      let modal = $(".v-content-modal");
      let title = $(".v-content-modal &gt; .modal-title");
      let content = $(".v-content-modal &gt; .modal-content");
      let btns = document.querySelectorAll("#info");
  
      btns.forEach(btn =&gt; {
          btn.addEventListener("mousemove", (e) =&gt; {
              modal.css({
                  top: 'unset',
                  right: 'unset',
                  left: 'unset',
                  bottom: 'unset'
              });
  
              title.html(e.target.getAttribute('data-title'));
              content.html(e.target.getAttribute('data-content'));
  
              let pageX, pageY, winWidth, winHeight, elmWidth, elmHeight, width_limit, height_limit = '';
              pageX = e.pageX;
              pageY = e.pageY;
              winWidth = $(window).width();
              winHeight = $(window).height();
              elmWidth = $(".v-content-modal").width();
              elmHeight = $(".v-content-modal").height();
              width_limit = winWidth - elmWidth;
              height_limit = winHeight - elmHeight;
  
              (pageX &gt; width_limit) ? crossWidth(): normalWidth();
              (pageY &gt; height_limit) ? crossHeight(): normalHeight();
  
              function crossWidth() {
                  modal.css({
                      right: '5px'
                  });
              }
  
              function normalWidth() {
                  modal.css({
                      left: pageX
                  });
              }
  
              function crossHeight() {
                  modal.css({
                      bottom: '111px'
                  });
              }
  
              function normalHeight() {
                  modal.css({
                      top: e.pageY + 30 + 'px'
                  });
              }
  
              // show when all customization is completed...
              modal.show();
          });
  
          btn.addEventListener("mouseleave", () =&gt; {
              modal.hide();
          });
      });
  
  });
     &lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>Again,</strong></p>
  
  <pre><code>&lt;div class="content"&gt; 
      Lorem text &lt;a href="/wiki/mark"&gt; Mark Info will show here when you hover &lt;/a&gt; Dummy text &lt;a href="/wiki/you"&gt; You will show here when you hover on it&lt;/a&gt;
  &lt;/div&gt;
  
  
  //Define one time only
  &lt;div class="modal" style="display: none"&gt;
    &lt;div class="modal-title"&gt; &lt;/div&gt;
    &lt;div class="modal-content"&gt; &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>when you hover on any &lt;a&gt; it will be show all the info by using the link addr "/wiki/mark" or "/wiki/you" </p>
  
  <p><strong>#we don't need to assign all info every time!</strong></p>