I've been attempting to implement Bootstrap popover element in my application.
Unfortunately, it doesn't seem to be working as expected. The popovers work fine when placed outside of a div with the overflow style property set.
Oddly enough, this code used to function properly in the previous version of Bootstrap.
You can view the issue I'm facing in this jsFiddle jsFiddle
What could possibly have gone wrong here??
Here's the relevant code for reference --
HTML -
<body>
<a href="#" rel="popover" data-content="test" data-original-title="hello" style="position: absolute; top: 300px; left: 300px;">This works</a>
<div id="cartridges">
<div class="relative">
<div id="listCartridges">
<ul>
<li>
<a href="#" rel="popover" data-content="test" data-original-title="hello">This doesnt work</a>
</li>
<li>
<a href="#" rel="popover" data-content="test" data-original-title="hello">This doesnt work</a>
</li>
<li>
<a href="#" rel="popover" data-content="test" data-original-title="hello">This doesnt work</a>
</li>
<li>
<a href="#" rel="popover" data-content="test" data-original-title="hello">This doesnt work</a>
</li>
<li>
<a href="#" rel="popover" data-content="test" data-original-title="hello">This doesnt work</a>
</li>
<li>
<a href="#" rel="popover" data-content="test" data-original-title="hello">This doesnt work</a>
</li>
</ul>
</div>
</div>
</div>
</body>
CSS --
@import url('http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap-combined.min.css');
body {
background: #666;
}
#cartridges {
position: fixed;
overflow: visible !important;
bottom: 0;
left: 0
width: 100%;
border-top: 1px solid #AAA;
}
#cartridges > .relative {
width: 100%;
height: 100%;
}
#listCartridges {
width: 100%;
background: #222;
}
#listCartridges > ul {
display: inline-block;
overflow-x: scroll;
overflow-y: hidden;
max-width: 100%;
white-space: nowrap;
}
#listCartridges > ul > li {
display: inline-block;
margin: 3px;
padding: 3px;
position: relative;
vertical-align:middle;
border: 1px solid #474747;
overflow: none;
}
JS --
$("[rel=popover]").popover({
animation: true,
trigger: 'click',
offset: 10,
placement: 'top',
delay: {
show: 500,
hide: 100
}
}).click(function(e) {
e.preventDefault();
});