CompatibilityMatrix

<style> td:hover,tr:hover { background-color: var(--color-primary-dark); cursor:pointer; } td.details { background-color: #fafafa; cursor:text; } .yellowCheckbox{ width:2.5rem } .tooltipss{ position:relative; width:fit-content; cursor:pointer; margin-right: auto; margin-left: auto; } .tooltipss .tooltiptext { visibility: hidden; width: 120px; background-color: #555; color: #fff; text-align: center; border-radius: 6px; padding: 5px 0; position: absolute; z-index: 1; bottom: 125%; left: 50%; margin-left: -60px; opacity: 0; transition: opacity 0.3s; } .tooltipss .tooltiptext::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #555 transparent transparent transparent; } .tooltipss:hover .tooltiptext { visibility: visible; opacity: 1; } </style> <table class="table table-striped" > <th>Kubernetes Version</th> <th><a href="{{ .Site.Params.repo }}-istio">meshery-istio</a></th> <th><a href="{{ .Site.Params.repo }}-linkerd">meshery-linkerd</a></th> <th><a href="{{ .Site.Params.repo }}-kuma">meshery-kuma</a></th> <th><a href="{{ .Site.Params.repo }}-nighthawk">meshery-nighthawk</a></th> <th><a href="{{ .Site.Params.repo }}-nginx-sm">meshery-nginx-sm</a></th> <th><a href="{{ .Site.Params.repo }}-traefik-mesh">meshery-traefik-mesh</a></th> <th><a href="{{ .Site.Params.repo }}-cilium">meshery-cilium</a></th> <th><a href="{{ .Site.Params.repo }}-consul">meshery-consul</a></th> </table> <script> function showCompatability () { let percentContainer = document.querySelectorAll(".compatibility") for(let i = 0 ; i<percentContainer.length;i++){ let percentage = parseFloat(percentContainer[i].innerHTML); if (percentage >= 90.00){ percentContainer[i].innerHTML = ` <div class = "tooltipss" style="text-align:center"> <span class = "tooltiptext">${percentage}%</span> </div> ` } else if(percentage >=1 && percentage<=89.99){ percentContainer[i].innerHTML = `<div class = "tooltipss" style="text-align:center"> <span class = "tooltiptext">${percentage}%</span> </div>` } else if(percentage < 0){ percentContainer[i].innerHTML = `<div class = "tooltipss" style="text-align:center"> <span class = "tooltiptext">Not Applicable</span> </div>` } else{ percentContainer[i].innerHTML = `<div class = "tooltipss" style="text-align:center"> <span class = "tooltiptext">${percentage}%</span> </div>` } } } function clickIcon(serviceMesh){ location.href = `/installation/compatibility-matrix/${serviceMesh}-past-results` } showCompatability() </script>