/* To Implement simple Tooltips in FabMo -- (there are no dependencies in this system) --
          {Tooltips provide info on an area or functionality of interface; use title-tips for brief popup info on buttons}
      STYLE
        - reference this style sheet (all CSS is compiled into the dashboard.css file by webpack);
             > so for Dashboard: reference tips in dashboard.css, e.g. <link rel="stylesheet" href="css/dashboard.css">
             > so for apps: reference tips in parent dashboard.css <link rel="stylesheet" href="../../css/dashboard.css">
      HTML
        - add class="tooltip" to the element you want to have a tooltip -- this will be a CIRCLE WITH AN "i" INSIDE;
        - add class="tooltiptext" to the element you want to be the tooltip text;

        - add the TEXT you want to be the tooltip text between the opening and closing tags of the element with class="tooltiptext"
        - by default the tool tip will display above the text box element and slightly to the right;
        - add class="tooltip-below" to the element you want to have a tooltip text display below the element;
        - add class="tooltip-left" to the element you want to have a tooltip text display towards the left of the element;

      EXAMPLE
        <h1>Wifi Networks Available<span class="tooltip tooltiptext::after">i<span class="tooltiptext">
            Wifi networks available to your tool. 
            Click on SSID name to set up a new wifi interface.</span></span>
        </h1>

                <div class="dro-addon-label"> Spindle-1 <span class="tooltip tooltip-left tooltiptext::after" style="justify-content: right; left: 63px; top:0px">i<span class="tooltiptext">
                  Set spindle RPM. Black values indicate commanded RPM; blue values indicate achieved RPM.<br> 
                  AMP value is a display of the spindle load as current in amps.</span></span></div>


      DESIGN  
        - further style the span to adjust fit and appearance; e.g.::after
            <span class="tooltip tooltip-left tooltiptext::after" style="justify-content: right; left: 63px; top:0px">i<span class="tooltiptext"> ...

        - at some point we may want to put all the tips and data into a single JSON object to make this easier to manage;
        - for now, I find the tips easier to locate and work on in the HTML ...;
*/

/* Tooltip elements */
/* Lots of fussing around to prevent a tip icon from SHOWING THROUGH, see below, z-index: 15 */

.tooltip {
  background-color: #bdbdbd90;
  position: relative;
  z-index: 10;
  left: 5px;
  top: -5px;
  display: inline-block;
  padding: 0px;
  border-radius: 50%;
  height: 18px;
  width: 18px;
  line-height: 100%;
  color: #ffffff;
  text-align: center;
  font-size: 1rem;
  font-family: serif;
  cursor: pointer;
}
  /* Tooltip position for logo */
  .tooltip-logo {
    left: -5px;
    top: -5px;
  }

  /* Tooltip text */
  .tooltip .tooltiptext {
    visibility: hidden;
    width: max-content;
    max-width: 900px;
    background-color: #bdbdbd;
    color: #fff;
    font-family: "Helvetica Neue",Helvetica,Roboto,Arial,sans-serif;
    line-height: 1.2;
    font-size: .9rem;
    text-align: left;
    padding-top: 5px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    border-radius: 6px;
    /* Position the tooltip text */
    position: absolute;
    z-index: 20;
    overflow:visible;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;
    /* Fade in tooltip */
    transition: opacity 0.2s ease-in-out 0.2s, visibility 0.2s ease-in-out 0.2s;
    opacity: 0;
    visibility: hidden;
  }
  
  /* Tooltip arrow */
  .tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    font-size: .875rem;
    top: 100%;
    left: 16%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #bdbdbd transparent transparent transparent;
  }
  
  /* Show the tooltip text when you mouse over the tooltip container */
  .tooltip:hover .tooltiptext {
    z-index: 20;
    visibility: visible;
    display: inline-block;
    width: max-content;
    max-width: 900px;
    opacity: 1;
    transition: opacity 0.2s ease-in-out, visibility 0.2s;
  }

  /* This is the parameter that keeps a tooltip from SHOWING THROUGH */
  .tooltip:hover {
    z-index: 15;
  }

  /* Tooltip-below container */
  .tooltip-below .tooltiptext {
    z-index: 20;
    top: 130%; /* Position below the trigger element */
    bottom: auto; /* Remove the bottom property */
  }

  /* Tooltip-left container */
  .tooltip-left .tooltiptext {
    left: -425px; /* Position left of the trigger element */
  }
  /* Adjust the left property of the arrow for better alignment */
  .tooltip-left .tooltiptext::after {
    left: 90%;
  }

  /* Tooltip-below arrow */
  .tooltip-below .tooltiptext::after {
    content: "";
    position: absolute;
    z-index: 20;
    bottom: 100%; /* Position the arrow at the bottom of the tooltip when it is above the trigger */
    top: auto; /* Remove the top property */
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent #bdbdbd transparent; /* Flip the arrow to point upwards */
  }

  /* Optional: Adjust the left property of the arrow for better alignment */
  .tooltip-below .tooltiptext::after {
    left: 20%; /* Adjust as needed for proper alignment */
  }

  /* Tool Tip Link */
  .tooltiplink {
    color: #007bff !important;
    text-decoration: underline;
  }
  
  .tooltiplink:hover {
    color: #0056b3 !important;
    text-decoration: none;
  }

  .parent-container {
    overflow: visible; /* Ensure parent elements do not clip the tooltip text */
  }
  