How I can use not selector in my tabs to show tooltip message on hover

[shahzadsiddiqui8]

I am making a page there are 3 tabs “seeker”, “Owner” and “Admin”.

(1) If seeker logs in then “Owner” and “Admin” tabs should display tooltip message “You are not authorized for this section/Tab” on hover of “Owner” and “Admin” tabs
(2) and if Owner logs in then “Admin” tab should display tooltip message “You are not authorized for this section/Tab” on hover of “Admin” tab.

Is this possible that we can achieve this using CSS :not() selectors, I tried but no luck, or any other way around to achieve this, kindly suggest.

here is my working:

<div class="row">
    <a href="#" class="btn tooltip right">
      <span>Seeker</span>
      <span class="tooltip-content">Lorem ipsum dolor sit amet</span>
    </a>
  </div>

<div class="row">
    <a href="#" class="btn tooltip right">
      <span>Owner</span>
      <span class="tooltip-content">You are not authorised for this Section</span>
    </a>
  </div>

<div class="row">
    <a href="#" class="btn tooltip right">
      <span>Admin</span>
      <span class="tooltip-content">You are not authorised for this Sectiont</span>
    </a>
  </div>

/* USELESS CSS */
.content {
  align-items: center;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  height: 100vh;
  font-family: 'Fira Sans', sans-serif;
  justify-content: center;
  padding: 2rem 0;
  width: 100vw;
}
.row {
  display: flex;
  margin: auto;
}
a {
  text-decoration: none;
}
.btn {
  margin: 0 0.5em;
}
/* COLORS */
/* BUTTONS */
.btn {
  align-items: center;
  background-color: white;
  border: 1px solid #cdd2d6;
  box-sizing: border-box;
  color: #000;
  display: flex;
  height: 45px;
  letter-spacing: 2px;
  padding: 0.8em 1em;
  transition: all 0.3s ease;
  margin-bottom: 20px;
}
.btn:hover {
  background-color: #05a8ff;
  border-color: #05a8ff;
  color: #fff;
}
/* TOOLTIP */
.tooltip {
  position: relative;
  overflow: hidden;
}
.tooltip:hover {
  overflow: visible;
}
.tooltip:hover .tooltip-content {
  opacity: 1;
}
.tooltip .tooltip-content {
  background: #05a8ff;
  box-shadow: 0 5px 25px 5px rgba(205, 210, 214, .8);
  box-sizing: border-box;
  color: #fff;
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 1px;
  max-width: 200px;
  min-width: 145px;
  padding: 1em;
  position: absolute;
  opacity: 0;
  transition: all 0.3s ease;
}
.tooltip .tooltip-content::after {
  background: #05a8ff;
  content: "";
  height: 10px;
  position: absolute;
  transform: rotate(45deg);
  width: 10px;
}

.tooltip.right .tooltip-content {
  left: calc(100% + 1.5em);
  top: 50%;
  transform: translateY(-50%);
}
.tooltip.right .tooltip-content::after {
  left: -5px;
  margin-top: -5px;
  top: 50%;
}

[Gandalf]

Well, for a start, how do you know whether it is a seeker, owner or admin? Isn’t this done server-side?

A tooltip isn’t going to stop someone accessing something they’re not supposed to see.

[PaulOB]

As mentioned above CSS will need something on the page to identify who is logged in. Usually this would be a class in the body or a parent wrapper. You would then use that class in conjunction with some other identifying features to control the display.

This is a contrived example and I’m not giving you the whole answer but you can grasp the concept better from here.

It could of course be done without using the :not selector but seeing as you asked …

Of course you should not rely on CSS or JS to stop anybody doing something they shouldn’t other than for cosmetic reasons.