CODEWITHSUNDEEP
jquerycsstwitter-bootstrap
eaofkaefaefa4fa4fa4f
eaofkaefaefa4fa4fa4f

Reputation: 35

Bootstrap Popover on Floated Element

I cannot seem to figure out how to put a popover on a element that is floating (in this case to the left)

Whenever I apply a popover it goes to the top-left of the parent container but when I remove the float css, the popover works fine.

Demo: Bootply

HTML

<a class="popper" href="#" data-toggle="popover" data-trigger="hover" data-placement="right" data-html="true" data-content="test textbox">
    <img class="avatar" src="http://www.polyvore.com/cgi/img-thing?.out=jpg&amp;size=l&amp;tid=51287906" height="60" width="60">
</a>

SCRIPT

$(function ()  
  {
    $('.popper').popover({
    trigger: 'click',
  });
});

CSS

.avatar {
  width: 60px;
  height: 60px;
  margin: 10px;
  border:2px solid black;
  border-radius: 500px;
  -webkit-border-radius: 500px;
  -moz-border-radius: 500px;
  float:left;
  display: inline-block;
}

Any help would be appreciated!

Upvotes: 1

Views: 1945

Answers (1)

marathonman
marathonman

Reputation: 452

so float popper

.popper{float:left;}

Bootply

Upvotes: 1

Related Questions