Tooltip only displays to left of the input field

[pixlapps]

I have this issue where over one of the last updates my tooltips, which are set as “top” only appear left no matter what I set in properties. I have disabled my style.css file to make sure it is not anything I set.

This is what I get:

My input field code:

<div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text" style="border-radius: .25rem 0 0 .25rem">R</span> </div> <input type="text" class="number-separator form-control text-end" id="quickPlanMonthlySalary" name="quickPlanMonthlySalary" placeholder="Enter Value" data-rule-number="" data-msg-number="Enter a valid amount." min="" data-rule-min="0" data-msg-min="Enter a value more than or equal to 0." dmx-bind:value="serverconnectFormData.data.queryIncome[0].amount" dmx-bs-tooltip="'<h6>Salaries</h6><p>Capture your monthly income before tax and deductions, if you are employed.</p>'" data-bs-html="true" data-bs-trigger="focus" data-bs-placement="top"> </div>

[Teodor]

Are you sure the space on top is enough for the tooltip to appear and fit there? If not it will be placed on the side.

[pixlapps]

I added some top padding to the modal body and still get it. Will also check in properties if I maybe have overflow: hidden or something else:

[pixlapps]

I tested on h2 element and it does display on top, so this is definitely something on my side. Will change from bug to howto

[Teodor]

Maybe that’s related to the input group prepend and the nested elements inside/positions/display properties. Maybe try experimenting a bit with this

[pixlapps]

I did remove the container and prepend - not difference but will go on troubleshooting. Thanks