I'm designing a joomla horizontal scroll website by specifying the width of the body to be 4500px wide and absolute positioning the content I want (tried loads of different ways and this one works the best for me). The problem is bootstrap tooltips dont position themselves correctly if I specify data-position"bottom"
I've tried adding { container: 'body' } to the js tooltip initialisation but it does not fix the problem (as the width of the body is wider than the viewport).
It's annoying the heck out of me, can anyone help please.
I've create a bootply and the code is below for reference
http://www.bootply.com/x1xfg7Z19J
The JS is as follows:
$("[data-toggle=tooltip]").tooltip({container:'body'});
the CSS is as follows:
body {
width: 4500px;
position:relative;
height: 100vh;
overflow-x: visible;
}
.dyno {
position: absolute;
transition: none;
}
.zap-fb {
background-color:#456789;
background-size: 100% 100%;
}
.zap-fb:hover {
background-color:#453698;
}
.zap-li {
background-color:#763456;
background-size: 100% 100%;
}
.zap-li:hover {
background-color:#854a34;
}
.zap-pi {
background-color:#912643;
background-size: 100% 100%;
}
.zap-pi:hover {
background-color:#7269c3;
}
The HTML is as follows:
<p>Scroll to the right to see the tooltip issue. If you position the squares around the center of the screen and hover you will see the bottom positioned tooltip way off to the left. If you position the squares to the right of the screen and hover to see the tool tip it is almost in the right position. Note without body position: relative, the tooltip boxes are wierd dimensions</p>
<a style="width:50px; height:50px; left:3144px; top:20px;" class="zap-fb dyno" data-block="268,292,left,3144,top,20" href="#" target="_blank" title="Spread the Word, Like Us on Facebook" data-toggle="tooltip" data-placement="right"></a>
<a style="width:30px; height:30px; left:2900px; top:10px;" class="zap-li dyno" data-block="240,250,left,2900,top,10" href="#" target="_blank" title="Promote your business whilst promoting ours" data-toggle="tooltip" data-placement="bottom"></a>
<a style="width:70px; height:70px; left:2700px; top:10px;" class="zap-pi dyno" data-block="200,208,left,2700,top,10" href="#" target="_blank" title="Share our work with the world" data-toggle="tooltip" data-placement="left"></a>
EDIT: posted the problem on the bootstrap github issues page: official response "Closing as a won't fix since it's v3." So I guess it is an issue but one that I've got to live with. I did try the scenario with bootstrap 4alpha and the tooltips position themselves correctly.
EDIT 2: using bootplys bootstrap version select, I've found that prior to the introduction of bootstrap 3.2.0, tooltips aligned correctly. I'll try and download 3.1.1 and see if I can spot the error.
