I need help turning the arrow white with a blue border like the box containing the text. I need to use the title inside an a tag as the content but feel free to edit everything else I managed to get it to a certain point but cant seem to get past this:

**CSS**

```
.toop {
   position: relative;
   padding: 0 5px;
   line-height: 23px;
}

.toop:hover:after {
   content: attr(title);
   color: #474747;
   font-size: 14px;
   line-height: 150%;
   text-align: left;
   background-color: #ffffff;
   border-radius: 5px;
   border: 2px solid #2192ce;
   padding: 5px 10px;
   opacity: 0.9;
   display: block;
   width: 180px;
   position: absolute;
   left: 10px; 
   bottom: 40px;
   z-index: 98;
}

.toop:hover:before {
   content: "";
   border: solid;
   border-color: #2191ce transparent;
   border-width: 10px 10px 0 10px;
   opacity: 0.9;
   display: block;
   left: 30px; 
   bottom: 30px;
   position: absolute;
   z-index: 99;
}

```

**HTML** 

```
<br>
<br>
<br>
<br>
<br>

<a href="#" class="toop" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">Tooltip is here</a>

```