Tooltip button moving when hover

Question

Hover any button and you will see that it's moving by itself. Why is this happening, is it a bootstrap bug? HTML: ``` ``` Bootply: http://www.bootply.com/iYnzOb5GY4

Accepted Answer

Tooltips in button groups and input groups require special setting

When using tooltips on elements within a `.btn-group` or an `.input-group`, you'll have to specify the option `container: 'body'` (documented below) to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip is triggered).

– Bootstrap Explanation for Tooltips

Here what you need to change in your code

JS

```
$('[rel=tooltip]').tooltip({container: 'body'});
```

HTML

Add this attribute to your buttons

`data-container="body"`

Here is Bootply link

Example

Tooltip button moving when hover

Solution

Problem

Related problems