CSS3 Tooltip: Dependent on width of Parent - html

Question

I have a tooltip to show my search when hovering over an icon. That works fine in itself.
My problem is, that this icon is inside an inline-block navigation and cause it acts as the parent of my tooltip it has to have the large width of it which messes up my layout.So if I don't extend the width of my parent with the Icon the Tooltip messes up due to the small width of ~30px of it's parent.
If I extend the width from my parent to 300px (The size of my tooltip), it messes up my layout.
I need a way of relieving the tooltip itself from the inside of the element with the Icon.
HTML Structure:
<div id="search">
<div class="wrapper">
<div class="popper inline">
<i class="fa fa-tags" />
<div class="tooltip">
<form>
<input placeholder="Search Tags" autocomplete="off" />
<button type="submit">
<a class="btn">
<i class="fa fa-search" />
</a>
</button>
</form>
</div>
<div class="inline">
<form>
<input placeholder="Search Tags" autocomplete="off" autofocus="true" />
<button type="submit">
<a class="btn">
<i class="fa fa-search" />
</a>
</button>
</form>
</div>
</div>
</div>
CSS (Scss):
#search {
background: $secondary;
padding: .25rem;
div.popper {
background: transparent;
border: none;
font-size: .8rem;
color: $highlight;
}
.inline form {
button, input, a {
background: transparent;
border: none;
font-size: .8rem;
color: $highlight;
}
input[type="Search"] {
width: 1368px;
outline: none;
font-style: italic;
font-size: .7rem;
padding: 1rem .5rem;
}
button {
margin-left: 1rem;
}
}
}
.popper {
position: relative;
width: 300px;
}
.popper .tooltip {
background: $secondary;
bottom: 100%;
color: $highlight;
display: block;
left: -25px;
margin-bottom: 20px;
opacity: 0;
padding: .8rem;
pointer-events: none;
position: absolute;
width: 300px;
max-width: 90%;
border-radius: 3px;
-webkit-transform: translateY(10px);
-moz-transform: translateY(10px);
-ms-transform: translateY(10px);
-o-transform: translateY(10px);
transform: translateY(10px);
-webkit-transition: all .25s ease-out;
-moz-transition: all .25s ease-out;
-ms-transition: all .25s ease-out;
-o-transition: all .25s ease-out;
transition: all .25s ease-out;
}
/* This bridges the gap so you can mouse into the tooltip without it disappearing */
.popper .tooltip:before {
bottom: -20px;
content: " ";
display: block;
height: 25px;
left: 0;
position: absolute;
width: 100%;
}
/* CSS Triangles - see Trevor's post */
.popper .tooltip:after {
border-left: solid transparent 7px;
border-right: solid transparent 7px;
border-top: solid $secondary 7px;
bottom: -7px;
content: " ";
height: 0;
left: 50%;
margin-left: -13px;
position: absolute;
width: 0;
}
.popper:hover .tooltip {
opacity: 1;
pointer-events: auto;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
I am grateful for all Your help! If you need further information, comment please.