<div class="right-side">
    <p>
        This is a paragraph with some
        <span id="difficult-word" popovertarget="mypopover"
            >difficult</span
        >
        words that you can hover over to see their meanings.
    </p>
    <dialog id="mypopover" popover>
  <p><strong>Difficult:</strong> Requiring effort, skill, or persistence to overcome; complex; unpleasant; stubborn.</p>
</dialog>

<div id="chat-window">
<button popovertarget="chat-popover-window" id="chat-button">
<img src="https://i.postimg.cc/jdnTBDkr/more.png" alt="Button Image" heigh=50px width=50px />
</button>
<div id="chat-popover-window" class="popover" popover>
<p>About Us</p>
  <hr/>
<p>Shop More</p>
  <hr/>
</div>
</div>

<button popovertarget="tour-dialog" id="showDialogButton">
take tour
</button>
        <dialog id="tour-dialog" popover="auto" popovertargetaction="hide">
          <div id="tour-content">
                <h2>Welcome to the Guided Tour!</h2>
                <p>
                    This tour will guide you through the basics of this
                    website.
                </p>
                <div class="buttons">
                    <button id="next-button" popovertarget="tour-content-html">Next</button>
                    <button id="cancel-button" popovertarget="tour-dialog" popovertargetaction="hide">Cancel</button>
                </div>
            </div>
        </dialog>
        <dialog id="tour-content-html" popover="auto" >
           <div class="triangle-top"></div>
            <div>
                <h2>This is where you enter HTML</h2>
                <p>This section is dedicated to entering HTML code.</p>
                <div class="buttons">
                    <button id="next-button" popovertarget="tour-content-css">Next</button>
                    <button id="cancel-button" popovertarget="tour-content-html" popovertargetaction="hide">Cancel</button>
                </div>
            </div>
        </dialog>
        <dialog id="tour-content-css" popover>
            <div class="triangle-top"></div>
            <h2>This is where you enter CSS</h2>
            <p>This section is dedicated to entering CSS code.</p>
            <div class="buttons">
                <button id="next-button" popovertarget="tour-content-js">Next</button>
                <button id="cancel-button" popovertarget="tour-content-css" popovertargetaction="hide">Cancel</button>
            </div>
        </dialog>
        <dialog id="tour-content-js" popover>
            <div class="triangle-top"></div>
            <h2>This is where you enter Javascript</h2>
            <p>This section is dedicated to entering Javascript code.</p>
            <div class="buttons">
                <button id="thankyou-button" popovertarget="tour-content-js" popovertargetaction="hide">Thank You!</button>
            </div>
        </dialog>

</div>

#mypopover:popover-open{
     position: absolute;
    bottom: 45%;
    height: 150px;
    right: 60%;
    width: 250px;
    transform: translateX(-50%);
}

#difficult-word {
  text-decoration: underline;
  cursor: pointer;
}

#chat-window > button {
    background-color: transparent;
    border: none;
    cursor: pointer;
}

#chat-button {
  /* Styles for the button */
  position: fixed;
  top: 20px; /* Adjust this value as needed */
  right: 20px; /* Adjust this value as needed */
  cursor: pointer;
  padding: 10px;
  border-radius: 15px;
  background-color: transparent;
  /* Add more styles as needed */
}

#chat-popover-window{
  position: absolute;
  inset: unset;
  left: auto;
  right: 25px;
  position: relative;
  background-color: #f5f5f5;
  border: 1px solid #ccc;
  border-radius: 10px;
}

#tour-dialog {
   position: relative;
  background-color: #f5f5f5;
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 10px;
  left: 5%;
}

.triangle-top {
  position: absolute;
  top: -15px; /* Adjust this value as needed */
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid black;
}

#tour-content-html {
  position: relative;
  background-color: #f5f5f5;
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 10px;
  bottom: 65%;
  right: 50%;
  transform: translateX(-50%);
}

#tour-content-css {
  position: relative;
  background-color: #f5f5f5;
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 10px;
  bottom: 65%;
  left: 25%;
  transform: translateX(-50%);
}

#tour-content-js {
  position: relative;
  background-color: #f5f5f5;
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 10px;
  bottom: 55%;
  left: 85%;
  transform: translateX(-50%);
}

const tooltipPopOver = document.getElementById("difficult-word");
 const target = document.getElementById("mypopover");

tooltipPopOver.addEventListener("mouseover",()=>{
    target.showPopover();
  });
  
tooltipPopOver.addEventListener("mouseout",()=>{
    target.hidePopover();
  });

document.addEventListener("click", (event) => {
  const clickedElement = event.target;

  if (clickedElement.id === "next-button") {
    const parentElement = clickedElement.closest("dialog");

    parentElement.togglePopover();
  }
});