Code Adding Popout Text Descriptions For Contact Links. :)

Hi all,

Here's a quick code dump for adding popout text descriptions for contact links.

The code here should be pretty modular, so just dump it inbetween the <style> and </style> tags. :)

.profile .contact .f-row:nth-child(1) .f-col:nth-child(1) a {
  position: relative;
}
.profile .contact .f-row:nth-child(1) .f-col:nth-child(1) a:hover::before {
  content: "Click to add me as a friend!"; /* Text for the tooltip */
  position: absolute;
  bottom: 100%; /* Position above the button */
  left: 50%; /* Centered horizontally */
  transform: translateX(-50%); /* Centered horizontally */
  padding: 5px 10px;
  background-color: #000;
  color: #fff;
  font-size: 14px;
  border-radius: 5px;
  white-space: nowrap; /* Prevents text from wrapping */
  opacity: 0; /* Initially hidden */
  transition: opacity 0.2s ease-in-out;
}
.profile .contact .f-row:nth-child(1) .f-col:nth-child(1) a:hover::before {
  opacity: 1; /* Show the tooltip on hover */
}


.profile .contact .f-row:nth-child(1) .f-col:nth-child(2) a {
  position: relative;
}
.profile .contact .f-row:nth-child(1) .f-col:nth-child(2) a:hover::before {
  content: "Click to add me to favorites!"; /* Text for the tooltip */
  position: absolute;
  bottom: 100%; /* Position above the button */
  left: 50%; /* Centered horizontally */
  transform: translateX(-50%); /* Centered horizontally */
  padding: 5px 10px;
  background-color: #000;
  color: #fff;
  font-size: 14px;
  border-radius: 5px;
  white-space: nowrap; /* Prevents text from wrapping */
  opacity: 0; /* Initially hidden */
  transition: opacity 0.2s ease-in-out;
}
.profile .contact .f-row:nth-child(1) .f-col:nth-child(2) a:hover::before {
  opacity: 1; /* Show the tooltip on hover */
}

.profile .contact .f-row:nth-child(2) .f-col:nth-child(1) a {
  position: relative;
}
.profile .contact .f-row:nth-child(2) .f-col:nth-child(1) a:hover::before {
  content: "Send me a message!"; /* Text for the tooltip */
  position: absolute;
  bottom: 100%; /* Position above the button */
  left: 50%; /* Centered horizontally */
  transform: translateX(-50%); /* Centered horizontally */
  padding: 5px 10px;
  background-color: #000;
  color: #fff;
  font-size: 14px;
  border-radius: 5px;
  white-space: nowrap; /* Prevents text from wrapping */
  opacity: 0; /* Initially hidden */
  transition: opacity 0.2s ease-in-out;
}
.profile .contact .f-row:nth-child(2) .f-col:nth-child(1) a:hover::before {
  opacity: 1; /* Show the tooltip on hover */
}

.profile .contact .f-row:nth-child(2) .f-col:nth-child(2) a {
  position: relative;
}
.profile .contact .f-row:nth-child(2) .f-col:nth-child(2) a:hover::before {
  content: "Forward my profile to a friend!"; /* Text for the tooltip */
  position: absolute;
  bottom: 100%; /* Position above the button */
  left: 50%; /* Centered horizontally */
  transform: translateX(-50%); /* Centered horizontally */
  padding: 5px 10px;
  background-color: #000;
  color: #fff;
  font-size: 14px;
  border-radius: 5px;
  white-space: nowrap; /* Prevents text from wrapping */
  opacity: 0; /* Initially hidden */
  transition: opacity 0.2s ease-in-out;
}
.profile .contact .f-row:nth-child(2) .f-col:nth-child(2) a:hover::before {
  opacity: 1; /* Show the tooltip on hover */
}

.profile .contact .f-row:nth-child(3) .f-col:nth-child(1) a {
  position: relative;
}
.profile .contact .f-row:nth-child(3) .f-col:nth-child(1) a:hover::before {
  content: "Feel free to IM me! :D"; /* Text for the tooltip */
  position: absolute;
  bottom: 100%; /* Position above the button */
  left: 50%; /* Centered horizontally */
  transform: translateX(-50%); /* Centered horizontally */
  padding: 5px 10px;
  background-color: #000;
  color: #fff;
  font-size: 14px;
  border-radius: 5px;
  white-space: nowrap; /* Prevents text from wrapping */
  opacity: 0; /* Initially hidden */
  transition: opacity 0.2s ease-in-out;
}
.profile .contact .f-row:nth-child(3) .f-col:nth-child(1) a:hover::before {
  opacity: 1; /* Show the tooltip on hover */
}

.profile .contact .f-row:nth-child(3) .f-col:nth-child(2) a {
  position: relative;
}
.profile .contact .f-row:nth-child(3) .f-col:nth-child(2) a:hover::before {
  content: "Block me... :("; /* Text for the tooltip */
  position: absolute;
  bottom: 100%; /* Position above the button */
  left: 50%; /* Centered horizontally */
  transform: translateX(-50%); /* Centered horizontally */
  padding: 5px 10px;
  background-color: #000;
  color: #fff;
  font-size: 14px;
  border-radius: 5px;
  white-space: nowrap; /* Prevents text from wrapping */
  opacity: 0; /* Initially hidden */
  transition: opacity 0.2s ease-in-out;
}
.profile .contact .f-row:nth-child(3) .f-col:nth-child(2) a:hover::before {
  opacity: 1; /* Show the tooltip on hover */
}

.profile .contact .f-row:nth-child(4) .f-col:nth-child(1) a {
  position: relative;
}
.profile .contact .f-row:nth-child(4) .f-col:nth-child(1) a:hover::before {
  content: "Add me to a group!"; /* Text for the tooltip */
  position: absolute;
  bottom: 100%; /* Position above the button */
  left: 50%; /* Centered horizontally */
  transform: translateX(-50%); /* Centered horizontally */
  padding: 5px 10px;
  background-color: #000;
  color: #fff;
  font-size: 14px;
  border-radius: 5px;
  white-space: nowrap; /* Prevents text from wrapping */
  opacity: 0; /* Initially hidden */
  transition: opacity 0.2s ease-in-out;
}
.profile .contact .f-row:nth-child(4) .f-col:nth-child(1) a:hover::before {
  opacity: 1; /* Show the tooltip on hover */
}

.profile .contact .f-row:nth-child(4) .f-col:nth-child(2) a {
  position: relative;
}
.profile .contact .f-row:nth-child(4) .f-col:nth-child(2) a:hover::before {
  content: "Report me... :("; /* Text for the tooltip */
  position: absolute;
  bottom: 100%; /* Position above the button */
  left: 50%; /* Centered horizontally */
  transform: translateX(-50%); /* Centered horizontally */
  padding: 5px 10px;
  background-color: #000;
  color: #fff;
  font-size: 14px;
  border-radius: 5px;
  white-space: nowrap; /* Prevents text from wrapping */
  opacity: 0; /* Initially hidden */
  transition: opacity 0.2s ease-in-out;
}
.profile .contact .f-row:nth-child(4) .f-col:nth-child(2) a:hover::before {
  opacity: 1; /* Show the tooltip on hover */
}