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:

Possible duplicate of [CSS triangle custom border color](https://stackoverflow.com/questions/9450733/css-triangle-custom-border-color) — Germano Plebani, Nov 22 '17 at 08:40
@davidchappy, I did not use any JS. Only by CSS. `
This is a message
` — Rana Depto, Nov 22 '17 at 08:50
You should nest your tooltip within the `.hint` containing element, rather than using the *pseudo-element* `:after`, this will allow you to use the `:after` *pseudo-element* (now freed up) as another element you can specify a `width` and `height` to, then rotate (`transform: rotate()`), apply a `border` property and `position` accordingly as required. — UncaughtTypeError, Nov 22 '17 at 08:56

Miron · Accepted Answer · 2017-11-25T02:04:19.607

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>

Yes, that is the thing that I wanted. Thanks for your explanation along with. And also for your previous experience. — Rana Depto, Nov 22 '17 at 10:09

score 2 · Answer 2 · answered Nov 22 '17 at 08:52

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>

Set Border Color of Tooltip Arrow with CSS

2 Answers2