Advance Tooltip

advance-tooltip

Advance Tooltip
---------------

index.html

<section>
  <div class="container">
    <img src="https://images.unsplash.com/photo-1513694203232-719a280e022f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1349&q=80" alt="">
    <div class="all-tooltip">
      <div class=" tooltip tooltip-1">
        <div class="pin">
          <ion-icon name="add-circle"></ion-icon>
        </div>
        <div class="tooltip-content">
          <div class="arrow"></div>
          <div class="img">
            <img src="https://images.unsplash.com/photo-1494438639946-1ebd1d20bf85?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1347&q=80" alt="">
          </div>
          <div class="content">
            <h1>This is a title</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, natus.</p>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, natus.</p>
            <button>Buy Now $199</button>
          </div>
        </div>
      </div>
      <div class="tooltip tooltip-2">
        <div class="pin"></div>
        <div class="tooltip-content">
          <div class="arrow"></div>
          <div class="img">
            <img src="https://images.unsplash.com/photo-1555041469-a586c61ea9bc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" alt="">
          </div>
          <div class="content">
            <h1>This is a title</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, natus.</p>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, natus.</p>
            <button>Buy Now $199</button>
          </div>
        </div>
      </div>
      <div class="tooltip tooltip-3">
        <div class="pin"></div>
        <div class="tooltip-content">
          <div class="arrow"></div>
          <div class="content">
            <h2>Hello world -3</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus molestiae accusantium magni ex numquam
              eveniet, doloremque dolores impedit beatae quas!</p>
          </div>
        </div>
      </div>
      <div class="tooltip tooltip-4">
        <div class="pin"></div>
        <div class="tooltip-content">
          <div class="arrow"></div>
          <div class="content">
            <h2>Hello world -4</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus molestiae accusantium magni ex numquam
              eveniet, doloremque dolores impedit beatae quas!</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- *******************   -->
<!--  !!!!!!!!!!!!!!!!!!!!!!!!!!! -->
<!--  This Code is for only the floating card in right bottom corner -->
<!-- ********************  -->

<div id="webCifar-sidebox">
  <div id="webCifar">
    <h2 class="logo">Web Cifar</h2>
    <p class="author">Coded By <span>Shaif Arfan</span> </p>
    <div class="items">
      <a href="https://www.youtube.com/channel/UCdxaLo9ALJgXgOUDURRPGiQ" target="_blank" class="item youtubeLink">
        <svg title="watch how we made this" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
          <path d="M10 12a2 2 0 100-4 2 2 0 000 4z" />
          <path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd" />
        </svg>
        <p>Watch how we made this.
        </p>
      </a>
      <a href="https://webcifar.com" target="_blank" class="item">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" />
        </svg>
        <p>https://webcifar.com</p>
      </a>

    </div>
    <div class="close">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
        <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
      </svg>
    </div>
  </div>
  <div id="webCifar-icon">
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
    </svg>
    <p>Info About the pen</p>
  </div>
</div>

script.js

const tooltips = document.querySelectorAll(".all-tooltip .tooltip");
const fullDiv = document.querySelector("section");
const container = document.querySelector(".container");
let timeoutId;
window.addEventListener("resize", contentPosition);
window.addEventListener("DOMContentLoaded", contentPosition);

function contentPosition() {
  tooltips.forEach((tooltip) => {
    const pin = tooltip.querySelector(".pin");
    const content = tooltip.querySelector(".tooltip-content");
    const arrow = tooltip.querySelector(".arrow");
    const pinLeft = pin.offsetLeft;
    if (pinLeft + content.offsetWidth / 2 > fullDiv.offsetWidth) {
      const extraLeft =
        fullDiv.offsetWidth - (pinLeft + content.offsetWidth / 2);
      // console.log('right-conflict', tooltip)
      content.style.left =
        pinLeft - content.offsetWidth / 2 + extraLeft - 30 + "px";
      content.style.top = pin.offsetTop + 30 + "px";
    } else if (
      pin.offsetLeft + container.offsetLeft <
      content.offsetWidth / 2
    ) {
      // console.log('left conflict', pin.offsetLeft)
      content.style.left = -container.offsetLeft + "px";
      content.style.top = pin.offsetTop + 30 + "px";
    } else {
      content.style.left = pinLeft - content.offsetWidth / 2 + "px";
      content.style.top = pin.offsetTop + 30 + "px";
    }
    arrow.style.left =
      pinLeft - content.offsetLeft + pin.offsetWidth / 2 + "px";
  });
}
tooltips.forEach((tooltip) => {
  const pin = tooltip.querySelector(".pin");
  const content = tooltip.querySelector(".tooltip-content");
  pin.addEventListener("mouseover", () => {
    tooltip.classList.add("active");
  });
  pin.addEventListener("mouseleave", () => {
    timeoutId = setTimeout(() => {
      if (!tooltip.classList.contains("content-hover")) {
        tooltip.classList.remove("active");
      }
    }, 2000);
  });
  content.addEventListener("mouseover", () => {
    clearTimeout(timeoutId);
    tooltip.classList.add("active");
    tooltip.classList.add("content-hover");
  });
  content.addEventListener("mouseleave", () => {
    timeoutId = setTimeout(() => {
      tooltip.classList.remove("active");
      tooltip.classList.remove("content-hover");
    }, 2000);
  });
});

// *********************
// This Code is for only the floating card in right bottom corner
// **********************

const WebCifarIcon = document.querySelector("#webCifar-icon");
const WebCifarEl = document.querySelector("#webCifar");
const close = WebCifarEl.querySelector(".close");
const youtubeLink = document.querySelector(".youtubeLink");

WebCifarIcon.addEventListener("click", () => {
  WebCifarEl.classList.add("active");
});
close.addEventListener("click", () => {
  WebCifarEl.classList.remove("active");
});

youtubeLink.setAttribute("href", "https://youtu.be/e_jEquJo7y8");

style.css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  font-size: 16px;
  font-family: "Montserrat";
}
body {
  background-color: azure;
  width: 100%;
}

section {
  height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-x: hidden;
}
.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}
.container img {
  height: 100%;
  width: 100%;
}
.all-tooltip {
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
}

.tooltip-content {
  position: absolute;
  background-color: rgb(255, 255, 255);
  box-shadow: 0px 0px 20px #00000020;
  padding: 30px;
  border-radius: 8px;
  width: 90vw;
  max-width: 300px;
  opacity: 0;
  pointer-events: none;
  /* left: -50%; */
  z-index: 2;
}
.tooltip-content .arrow {
  position: absolute;
  width: 10px;
  height: 10px;
  border: 10px solid transparent;
  border-bottom-color: rgb(255, 255, 255);
  top: 0px;
  left: 50%;
  transform: translate(-50%, -100%) rotate(0deg);
}
.pin {
  position: absolute;
  content: "";
  top: 50%;
  left: 80%;
  height: 25px;
  width: 25px;
  background-color: rgb(255, 255, 255);
  border-radius: 50%;
  cursor: pointer;
}
.pin:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: rgb(255, 255, 255);
  border-radius: 50%;
  animation: puls-effect 1s ease infinite;
}
.tooltip.active .tooltip-content {
  opacity: 1;
  pointer-events: all;
  display: block;
}

/* Custom Style for tooltip-1 */

.tooltip-1 .pin {
  top: 40%;
  left: 82%;
  height: 15px;
  width: 15px;
  background-color: rgb(255, 255, 255);
}
.tooltip-1 .tooltip-content {
  display: flex;
  max-width: 500px;
  align-items: stretch;
  justify-content: center;
  padding: 0;
  background-color: aliceblue;
}
.tooltip-1.active .tooltip-content {
  display: flex;
}
.tooltip-1 .tooltip-content .img {
  width: 50%;
  object-fit: cover;
}
.tooltip-1 .tooltip-content .content {
  width: 50%;
  padding: 20px;
}
.tooltip-1 .tooltip-content .content h1 {
  font-size: 24px;
}
.tooltip-1 .tooltip-content .content p {
  font-size: 14px;
}
.tooltip-1 .tooltip-content .content button {
  font-family: "Montserrat";
  font-size: 18px;
  font-weight: 400;
  border: none;
  outline: none;
  background-color: white;
  color: black;
  padding: 10px;
  cursor: pointer;
  margin-top: 20px;
  border-radius: 4px;
  box-shadow: 0px 0px 20px #00000020;
}

/* custom style for tooltip-2 */

.tooltip-2 .pin {
  top: 80%;
  left: 35%;
  height: 15px;
  width: 15px;
}
.tooltip-2 .tooltip-content .content h1 {
  margin: 20px 0;
}
.tooltip-2 .tooltip-content {
  background-color: aliceblue;
}
.tooltip-2 .tooltip-content button {
  font-family: "Montserrat";
  font-size: 18px;
  font-weight: 400;
  border: none;
  outline: none;
  background-color: white;
  color: black;
  padding: 10px;
  cursor: pointer;
  margin-top: 20px;
  border-radius: 4px;
  box-shadow: 0px 0px 20px #00000020;
}

/* Custom style for tooltip-3 */

.tooltip-3 .pin {
  top: 20%;
  left: 5%;
  height: 15px;
  width: 15px;
}
/* Custom style for tooltip-4 */

.tooltip-4 .pin {
  top: 80%;
  left: 5%;
  height: 15px;
  width: 15px;
}

/* Puls Effect For Pins */

@keyframes puls-effect {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(3);
    opacity: 0;
  }
}

/* Media Query */

@media (max-width: 768px) {
  .tooltip-1 .tooltip-content {
    flex-direction: column;
    max-width: 300px;
  }
  .tooltip-1 .tooltip-content .content,
  .tooltip-1 .tooltip-content .img {
    width: 100%;
  }
}

/* ********************* */
/* This Code is for only the floating card in right bottom corner */
/* ********************** */

@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap");
* {
  padding: 0;
  margin: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

a {
  padding: 0;
  margin: 0;
  color: var(--color-4);
  text-decoration: none;
}
#webCifar-sidebox {
  position: absolute;
  right: 0px;
  bottom: 0px;
  overflow-x: clip;
  width: 300px;
}
#webCifar-sidebox p {
  padding: 0;
  margin: 0;
}
#webCifar {
  --color-1: #17bcb4;
  --color-2: #24252a;
  --color-3: #244044;
  --color-4: #f3f8f7;
  background: var(--color-2);
  display: inline-block;
  color: var(--color-4);
  padding: 10px 17px;
  border-radius: 6px;
  font-family: "Roboto Mono", monospace;
  text-align: center;
  position: absolute;
  right: 5px;
  bottom: 5px;
  -webkit-transform: translateX(calc(100% + 5px));
  transform: translateX(calc(100% + 5px));
  -webkit-transition: 0.5s ease-out transform;
  transition: 0.5s ease-out transform;
  z-index: 4;
}

#webCifar.active {
  -webkit-transform: translateX(0);
  transform: translateX(0);
}

#webCifar .logo {
  font-size: 25px;
}

#webCifar .author {
  margin-top: 10px;
  margin-bottom: 20px;
}

#webCifar .author span {
  background-color: var(--color-3);
  padding: 3px;
  border-radius: 4px;
}

#webCifar .items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: start;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

#webCifar .item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 10px;
  padding: 5px;
  border-radius: 4px;
  text-align: left;
}

#webCifar .item:hover {
  background-color: var(--color-3);
}

#webCifar svg {
  max-width: 20px;
}

#webCifar .close {
  position: absolute;
  display: inline-block;
  height: 30px;
  width: 30px;
  right: 5px;
  top: 5px;
  padding: 5px;
  background-color: var(--color-3);
  border-radius: 50%;
  font-size: 20px;
  cursor: pointer;
}

#webCifar-icon {
  --color-2: #24252a;
  --color-3: #244044;
  font-family: "Roboto Mono", monospace;
  text-align: left;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  background-color: var(--color-2);
  color: white;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  padding: 5px;
  border-radius: 4px;
  gap: 5px;
  margin: 5px;
  cursor: pointer;
  z-index: 1;
  position: relative;
  right: -27%;
}

#webCifar-icon svg {
  max-width: 20px;
}