0

I have created tool tip, which looks like this:

Tooltip showing the text "save"

But arrow doesn't have border like rest of the element.

CSS is as follows:

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

.tooltip .tooltiptext {
  visibility: hidden;
  width: 50px;
  height: 30px;
  background-color: #000;
  color: #fdfefe;
  text-align: center;
  border-radius: 0;
  padding: 5px 0;
  bottom: 125%;
  left: 50%;
  margin-left: -110px;
  margin-top: 15px;
  opacity: 1;
  border: 2px solid grey;
  position: absolute;
  z-index: 1;
  top: -20px;
  left: 205%;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -4px;
  border-width: 6px;
  border-style: solid;
  border-color: #000 transparent transparent transparent;
}

How can I add border to arrow too?

DarkWiiPlayer
  • 6,871
  • 3
  • 23
  • 38
Mandroid
  • 6,200
  • 12
  • 64
  • 134
  • `.tooltip .tooltiptext { ... }` Why? What else would there be inside a tooltip that you cannot just do `.tooltip * { ... }`? – DarkWiiPlayer Jun 25 '19 at 12:54

1 Answers1

0

Try like this bro :) 

.down-arrow {
    display: inline-block;
    position: relative;
    border: 2px solid #777777;
    text-decoration: none;
    border-radius: 2px;
    padding: 20px;
    margin-top: 50px;
    background-color: red;
}
.down-arrow:before {
    content: '';
    display: block;
    position: absolute;
    left: 42%;
    right: 0;
    bottom: -28px;
    width: 0;
    height: 0;
    border: 14px solid transparent;
    border-top-color: #777777;
}

.down-arrow:after {
    content: '';
    display: block;
    position: absolute;
    left: 42%;
    bottom: -24px;
    width: 0;
    height: 0;
    border: 14px solid transparent;
    border-top-color: red;
}
<div href="#" class="down-arrow">Perfect Arrow</div>
Prasanth
  • 109
  • 4