Set Border Color of Tooltip Arrow with CSS

Question

I was trying to set border colour white of my tooltip's arrow key. I was able to set tooltips bottom border colour white, how can I set bottom border colour of arrow too? Here is what I tried:

.hint {
  position: relative;
  display: inline-block;
}

.hint:before,
.hint:after {
  position: absolute;
  opacity: 0;
  z-index: 100;
  -webkit-transition: 0.3s ease;
  -moz-transition: 0.3s ease;
  pointer-events: none;
}

.hint:hover:before,
.hint:hover:after {
  opacity: 1;
}

.hint:before {
  content: '';
  position: absolute;
  background: transparent;
  border: 6px solid transparent;
  position: absolute;
  transform: translateX(-50%);
}

.hint:after {
  content: attr(data-hint);
  background: rgba(0, 0, 0, 0.8);
  border-bottom-left-radius: 20px;
  border-top-right-radius: 20px;
  color: white;
  padding: 8px 10px;
  font-size: 16px;
  font-style: italic;
  white-space: nowrap;
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.4);
  transform: translateX(-50%);
}


/* top mouse-icon*/

.hint--top:before {
  bottom: 100%;
  left: 50%;
  margin: 0 0 -18px 0;
  border-top-color: rgba(0, 0, 0, 0.8);
}

.hint--top:after {
  bottom: 100%;
  left: 50%;
  margin: 0 0 -6px -10px;
}


/*arrow key*/

.hint--top:hover:before {
  margin-bottom: -12px;
  border-width: 12px;
  /*margin-left: -56px;*/
  border-color: rgba(194, 225, 245, 0);
  border-top-color: rgba(0, 0, 0, 0.8);
}

.hint--top:hover:after {
  margin-bottom: 12px;
  border-width: 10px;
  /*margin-left: -50px;*/
  border-top-color: rgba(0, 0, 0, 0.8);
  border-bottom: 1px solid #f0f0f0;
}

<br /><br /><br /><br />
<div class="hint hint--top" data-hint="May Peace, Mercy and Blessings of Allah be Upon You" class="intro-sub">
  <a>Assalaamu 'Alaikum</a>
</div>

For clarification, I am including sample picture here. Right now I have this:

But I need something like the given image below:

Answer 1

I had struggled to draw triangle before, too. Almost tricks such as here and here dealing with triangles in HTML handles border. So painting borders of triangles is impossible with this kind of tricks.

One alternative is to rotate a square and hide a half. The advantage of this method is that drawing border is easy, but I didn't find super clean method to hide half of the square. So when the tooltip or the triangle have opacity less than 1, this is not a desirable method.

Maybe this is what you want. Jsfiddle.net demo is here.

.hint {
  position: relative;
  display: inline-block;
  margin-top: 40px;
}

.hint:before,
.hint:after {
  position: absolute;
  opacity: 0;
  -webkit-transition: 0.3s ease;
  -moz-transition: 0.3s ease;
  pointer-events: none;
}

.hint:hover:before,
.hint:hover:after {
  opacity: 1;
}

.hint:before {
  content: '';
  position: absolute;
  background: rgba(0, 0, 0, 1);
  width: 6px;
  height: 6px;
  transform: translateX(-50%) rotate(45deg);
  z-index: 2;
}

.hint:after {
  content: attr(data-hint);
  background: rgba(0, 0, 0, 1);
  border-bottom-left-radius: 20px;
  border-top-right-radius: 20px;
  color: white;
  padding: 8px 10px;
  font-size: 16px;
  font-style: italic;
  white-space: nowrap;
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.4);
  transform: translateX(-50%);
  z-index: 1;
}


/* top mouse-icon*/

.hint--top:before {
    bottom: 100%;
    left: 50%;
    margin: 0 0 -12px 0;
}

.hint--top:after {
  bottom: 100%;
  left: 50%;
  margin: 0 0 -6px -10px;
}


/*arrow key*/

.hint--top:hover:before {
    margin-bottom: 0px;
    /* border-width: 2px; */
    width: 24px;
    height: 24px;
    /* margin-left: -56px; */
    border: solid white;
    border-width: 0 1px 1px 0;
    border-top-left-radius: 100%;
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.4);
    /* border-top-color: rgba(0, 0, 0, 0.8); */
}

.hint--top:hover:after {
  margin-bottom: 12px;
  border-width: 10px;
  /*margin-left: -50px;*/
  border-top-color: rgba(0, 0, 0, 0.8);
  border-bottom: 1px solid #f0f0f0;
}

<div class="hint hint--top" data-hint="May Peace, Mercy and Blessings of Allah be Upon You" class="intro-sub">
  <a>Assalaamu 'Alaikum</a>
</div>

Answer 2

First of all your html is very strange. Adding class attribute twice on an element is pointless. Also the br are not good practice for making space.. Use margins instead or something else.

For your problem, you need another triangle with red border positioned under your black triangle. This red triangle should be bigger.

Then, the small black triangle should have a z-index bigger than your tooltip so it will cover the red border of the tooltip

I added all the new code at the beginning of the snippet. See below

You need to change a little bit the animation. But it should be easy

  .border-triangle {
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    position: absolute;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    opacity: 0;
    transition: 0.3s ease-out;
    border-top: 20px solid red;
  }
  
  .hint:hover .border-triangle {
    opacity: 1;
  }
  
  .hint {
    position: relative;
    display: inline-block;
  }
  
  .hint:before,
  .hint:after {
    position: absolute;
    opacity: 0;
    z-index: 100;
    -webkit-transition: 0.3s ease;
    -moz-transition: 0.3s ease;
    pointer-events: none;
  }
  
  .hint:hover:before,
  .hint:hover:after {
    opacity: 1;
  }
  
  .hint:before {
    content: '';
    position: absolute;
    background: transparent;
    border: 6px solid transparent;
    position: absolute;
    transform: translateX(-50%);
  }
  
  .hint:after {
    content: attr(data-hint);
    background: rgba(0, 0, 0, 1);
    border-bottom-left-radius: 20px;
    border-top-right-radius: 20px;
    color: white;
    padding: 8px 10px;
    font-size: 16px;
    font-style: italic;
    white-space: nowrap;
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.4);
    transform: translateX(-50%);
  }
  /* top mouse-icon*/
  
  .hint--top:before {
    bottom: 100%;
    left: 50%;
    margin: 0 0 -18px 0;
    border-top-color: rgba(0, 0, 0, 0.8);
  }
  
  .hint--top:after {
    bottom: 100%;
    left: 50%;
    margin: 0 0 -6px -10px;
    z-index: 1;
  }
  /*arrow key*/
  
  .hint--top:hover:before {
    margin-bottom: -10px;
    border-width: 12px;
    /*margin-left: -56px;*/
    border-color: rgba(194, 225, 245, 0);
    border-top-color: rgba(0, 0, 0, 1);
    z-index: 2;
  }
  
  .hint--top:hover:after {
    margin-bottom: 12px;
    border-width: 10px;
    /*margin-left: -50px;*/
    border-top-color: rgba(0, 0, 0, 0.8);
    border-bottom: 2px solid red;
  }

<br>
<br>
<br>
<div class="hint  hint--top" data-hint="May Peace, Mercy and Blessings of Allah be Upon You" class="intro-sub"> <!-- intro-sub second class is usless -->
  <div class="border-triangle">

  </div>
  <a>Assalaamu 'Alaikum</a>
</div>