I am facing issue while using the bootstrap tooltip , which i given its placement to “top” , and i have implement this tooltip on a username ,But issue is when username is of appropriate characters length , it shows the tooltip on top but when characters length is more , its shows tooltip right to the element and also includes a gap , it looks like tooltip is implemented on the right element not on the username field.

I have tried to change placement position of tooltip as left ,right ,top ,bottom , but its not working