CSS - How can I fix style on Angular Tooltip text?

Question

I am using Tooltip to display text when hover over exclamation symbol as shown in the video. Problem is I see orange border appears when I click on the component.

How can I get rid of that border and show tooltip only when click on symbol?

Live Demo - https://screenrec.com/share/yj3OQE2hxw

Code

.tooltiptext {
  width: 275px;
  height: 141px;
  background: -colors.$white;
  border: 1px solid rgb(220, 220, 220);
  border-radius: 3px;
  text-align: start;
  color: -colors.$black;
  font-weight: normal;
  font-family: -fonts.$-font-family-regular;
  letter-spacing: 0px;
  line-height: 22px;
  box-shadow: 0px 4px 6px 0px rgba(34, 34, 34, 0.1);
  margin-left: -150px;
  bottom: 125%;
  visibility: hidden;
  position: absolute;
  padding: 10px;
}

.tooltip .tooltiptext:after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -12px;
  border-width: 7px;
  border-style: solid;
  border-color: -colors.$white transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

.toolClass {
  display: inline-block;
  height: 18px;
  width: 18px;
  transform: translateY(3px);
  svg {
    fill: #cdcdcd;
  }
}

<div class="btn-text">
  {{ Data 1 }}
  <div class="toolClass tooltip" tooltip tooltipPlacement="top">
    <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 16 16">
                <path d="M9,4c2.8,0,5,2.2,5,5s-2.2,5-5,5s-5-2.2-5-5S6.2,4,9,4 M9,2C5.1,2,2,5.1,2,9s3.1,7,7,7s7-3.1,7-7     c0-1.9-0.7-3.6-2.1-4.9S10.9,2,9,2z M8,8.5v4.4h2V8.5H8z M8,5.2v2h2v-2H8z"/>
            </svg>
    <span class="tooltiptext">{{This product is related to Amazon}}</span>
  </div>
</div>