We Keep Coding

What can I do to move this menu button from my sidebar to the right?

coud you help me please?.
Currently I'm creating this Angular Sidenav component, without jquery or Angular Material, just Angular tools, css and html.
I'm usin a ng-If to destroy the component when the red button is clicked, I'm using ng-class in the button to change the icon and also I'm using ng-class to try to move the wrapper Div with the button, but It doesn't work. The div and the button don't move.
HTML
<div class="sidebar" *ngIf="!open">
<header>My App</header>
<ul>
<li><i class="fa fa-tachometer"></i>Dashboard</li>
<li><i class="fa fa-external-link" aria-hidden="true"></i>Shortcuts</li>
<li><i class="fa fa-eye" aria-hidden="true"></i>Overview</li>
<li><i class="fa fa-calendar" aria-hidden="true"></i>Events</li>
<li><i class="fa fa-building-o" aria-hidden="true"></i>About</li>
<li><i class="fa fa-paper-plane" aria-hidden="true"></i>Contact</li>
</ul>
</div>
<!-- SideNav -->
<!-- close / open button -->
<div id="menu" (click)="prueba()" [ngClass]="{'closed': !open}">
<a id="open-close">
<i class="fa" [ngClass]="{'fa-bars': !open, 'fa-times': open}" ></i>
</a>
</div>
<!-- close / open button -->
TypeScript
export class SidenavaComponent implements OnInit {
open: boolean;
constructor() {
}
prueba() {
this.open = !this.open;
console.log(this.open);
}
ngOnInit() {
this.open = true;
}
}
Css
#import url('https://fonts.googleapis.com/css?family=Roboto:300,400,400i,500');
#import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
.sidebar {
position: fixed;
width: 20%;
height: 100%;
background: white;
box-shadow: 2px 2px 5px #999;
}
.sidebar header {
font-size: 22px;
color: white;
line-height: 70px;
text-align: center;
background: #063146;
user-select: none;
}
.sidebar ul a{
display: block;
height: 100%;
width: 100%;
line-height: 65px;
font-size: 20px;
color:#063146;
padding-left: 40px;
box-sizing: border-box;
transition: .4s;
}
ul li:hover a{
padding-left: 50px;
}
.sidebar ul a i{
margin-right: 16px;
}
/* boton de cierre */
#menu {
position: fixed;
background-color: tomato;
width: 40px;
height:40px;
margin-left: 21%;
border-radius: 200px 200px 200px 200px;
-moz-border-radius: 200px 200px 200px 200px;
-webkit-border-radius: 200px 200px 200px 200px;
border: 0px solid #000000;
}
#open-close{
margin-top: 12%;
width: 35px;
height:35px;
margin-left: 21%;
}
.closed{
margin-left: 1px;
}

I think you want something like this:
Stackblitz:
https://stackblitz.com/edit/angular-ki5mus

Parent element changing when javascript applies a transformation

I am trying to create a side menu navigation that slides into and off of the screen when you click a button. I have a container around the menu and the button so that they move together. The width of the container is 13% along with the menu which is weird that the menu is 13% of the body and not of the container. However, when I click the button the menu width becomes 13% of the container and no longer of the body. I would like the width to stay the same but I cannot figure out why it is doing this.
Note I have multiple CSS sheets for each screen size that is why function screensize() is there.
function navfunction() {
var z;
function screensize() {
if (window.innerWidth < 600) {
z = "translateX(-50%)";
} else {
z = "translateX(-15%)";
}
if (window.innerWidth > 1650) {
z = "translateX(-13%)";
} else {
z = z;
}
}
function navmove() {
var x = document.getElementsByClassName("navanimate")[0];
if (x.style.transform === "none") {
x.style.transform = z;
} else {
x.style.transform = "none";
}
}
screensize();
navmove();
}
.nav {
display: inline-block;
background-color: #efefef;
padding: 0px 0px 0px 0px;
width: inherit;
position: fixed;
overflow: hidden;
height: 100%;
border-right: 2px solid #bababa;
}
.navanimate {
transition: transform .8s;
transition-timing-function: ease-out;
position: fixed;
height: 100%;
width: 15%;
background-color: red;
padding-right: 0px;
}
.centernav {
width: 100%;
position: absolute;
top: 50%;
transform: translateY(-51%);
}
.menupic {
position: fixed;
width: 35px;
height: 35px;
cursor: pointer;
top: 49%;
left: 15%;
background-color: #efefef;
border: 2px solid #bababa;
border-left: none;
padding: 12px 0px 12px 0px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.navop {
display: inline-block;
color: black;
text-decoration: none;
font-family: verdana;
font-size: 17px;
margin: 0px 0px 0px 0px;
padding: 15px 0px 15px 15px;
width: 100%;
}
.navop:hover {
background-color: white;
}
<span class="navanimate" style="transform:none;">
<span class="nav">
<span class="centernav">
<span class="current"><a class="navop" href="index.html">Home</a></span><br>
<a class="navop" href="about.html">About Us</a><br><a class="navop" href="documents.html">Documents</a><br><a class="navop" href="events.html">Events and <span class="navbreaker"></span>Calendar</a>
<br><a class="navop" href="contact.html">Contact Info</a><br><a class="navop" href="clubhouse.html">Clubhouse</a><br><a class="navop" href="index.html">Architectural <span class="navbreaker"></span>Control</a>
<br><a class="navop" href="index.html">Dues</a><br><a class="navop" href="index.html">Parking</a><br><a class="navop" href="index.html">Pool</a>
<br><a class="navop" href="index.html">Trash and Recycle</a>
</span>
</span>
<img src="menupic.png" class="menupic" onclick="navfunction()">
</span>

I think you can get away with your javascript doing a single thing: adding and removing an open class.
Everything else you should be able to achieve with CSS.
function navfunction() {
document.querySelector('.nav.animate').classList.toggle('open')
}
body,
html {
margin: 0;
}
.nav {
position: fixed;
height: 100%;
width: 15%;
background-color: red;
}
.nav.open {
transform: translatex(-100%);
}
.nav.animate {
transition: transform 0.8s;
}
.nav-button {
display: block;
background: black;
position: absolute;
width: 35px;
height: 35px;
cursor: pointer;
top: 50%;
transform: translatey(-17px);
right: -35px;
border: none;
}
.nav-item {
display: block;
}
<div class="nav animate">
<div class="nav-items">
<a class="nav-item" href="index.html">Home</a>
<a class="nav-item" href="about.html">About Us</a>
<a class="nav-item" href="documents.html">Documents</a>
<a class="nav-item" href="events.html">Events and Calendar</a>
<a class="nav-item" href="contact.html">Contact Info</a>
<a class="nav-item" href="clubhouse.html">Clubhouse</a>
<a class="nav-item" href="index.html">Architectural Control</a>
<a class="nav-item" href="index.html">Dues</a>
<a class="nav-item" href="index.html">Parking</a>
<a class="nav-item" href="index.html">Pool</a>
<a class="nav-item" href="index.html">Trash and Recycle</a>
</div>
<button class="nav-button" onclick="navfunction()"></button>
</div>

How to show full width background color on tree node CSS

I have created a tree and there is background-color change on hover of tree node. I want to show background-color on full width like in this example(on click of any node it shows gray color).
But the element on which I am applying the background-color is not full width itself. How can I achieve this?
.qwc-tree__branch {
padding-left: 40px !important;
font-size: 12px;
}
.tree__root {
padding-left: 0 !important;
}
.tree__node {
list-style-type: none;
margin: 0;
padding-left: 5px;
position: relative
}
.tree__node::before,
.tree__node::after {
content: '';
left: -20px;
position: absolute;
right: auto
}
.tree__node::before {
border-left: 1px dotted #e0e0e0;
bottom: 50px;
height: 100%;
top: 0;
width: 1px
}
.tree__node::after {
border-top: 1px dotted #e0e0e0;
height: 20px;
top: 15px;
width: 25px
}
.tree__root>.tree__root-node::before {
border: 0;
}
.tree__root>.tree__root-node::after {
border: 0;
}
.tree__node-header:hover {
background-color: lightblue;
}
.tree__node-name {
display: inline-flex;
align-items: center;
padding: 3px 8px;
text-decoration: none
}
.tree__node-name--icon {
margin: 0 5px 0 3px;
color: $primary;
}
.tree__node-action {
cursor: pointer;
float: right;
margin-right: 15px
}
tree .tree__node:last-child::before {
height: 30px
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<ul class="tree__branch tree__root">
<li class="tree__node tree__root-node">
<div class="tree__node-header">
<span class="tree__node-name">
<i class="material-icons tree__node-name--icon">assignment</i> India
</span>
<i class="material-icons tree__node-action">minimize</i>
</div>
<ul class="tree__branch">
<li class="tree__node">
<div class="tree__node-header">
<span class="tree__node-name">
<i class="material-icons tree__node-name--icon">assignment</i> Punjab
</span>
</div>
</li>
<li class="tree__node">
<div class="tree__node-header">
<span class="tree__node-name">
<i class="material-icons tree__node-name--icon">assignment</i> Haryana
</span>
</div>
</li>
</ul>
</li>
</ul>

You can use pseudo element to simulate the background and make it overflowing:
.tree__node-header:after {
content:"";
position:absolute;
top:0;
left:-40px; /*adjust this*/
right:0;
bottom:0;
z-index:-1;
}
Full code:
.qwc-tree__branch {
padding-left: 40px !important;
font-size: 12px;
}
.tree__root {
padding-left: 0 !important;
}
/*added this*/
.tree__root>.tree__root-node>.tree__node-header {
overflow:hidden;
}
/**/
.tree__node {
list-style-type: none;
margin: 0;
padding-left: 5px;
position: relative
}
.tree__node::before,
.tree__node::after {
content: '';
left: -20px;
position: absolute;
right: auto
}
.tree__node::before {
border-left: 1px dotted #e0e0e0;
bottom: 50px;
height: 100%;
top: 0;
width: 1px
}
.tree__node::after {
border-top: 1px dotted #e0e0e0;
height: 20px;
top: 15px;
width: 25px
}
.tree__root>.tree__root-node::before {
border: 0;
}
.tree__root>.tree__root-node::after {
border: 0;
}
.tree__node-header:hover,
.tree__node-header:hover:after { /*Added this*/
background-color: lightblue;
}
/*Added this*/
.tree__node-header {
position:relative;
}
.tree__node-header:after {
content:"";
position:absolute;
top:0;
left:-45px;
right:0;
bottom:0;
z-index:-1;
}
/* */
.tree__node-name {
display: inline-flex;
align-items: center;
padding: 3px 8px;
text-decoration: none
}
.tree__node-name--icon {
margin: 0 5px 0 3px;
color: $primary;
}
.tree__node-action {
cursor: pointer;
float: right;
margin-right: 15px
}
tree .tree__node:last-child::before {
height: 30px
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<ul class="tree__branch tree__root">
<li class="tree__node tree__root-node">
<div class="tree__node-header">
<span class="tree__node-name">
<i class="material-icons tree__node-name--icon">assignment</i> India
</span>
<i class="material-icons tree__node-action">minimize</i>
</div>
<ul class="tree__branch">
<li class="tree__node">
<div class="tree__node-header">
<span class="tree__node-name">
<i class="material-icons tree__node-name--icon">assignment</i> Punjab
</span>
</div>
</li>
<li class="tree__node">
<div class="tree__node-header">
<span class="tree__node-name">
<i class="material-icons tree__node-name--icon">assignment</i> Haryana
</span>
</div>
</li>
</ul>
</li>
</ul>

Need to hide an <hr> when jQuery slideToggle is executed, then show when clicked again

I am starting to learn jQuery. I have a simple button that I have executing slideToggle to show/hide a div. I have an break line above the div being toggled. I need to hide this when the button is first clicked to toggle the div open, then need to show the when the button is clicked again to toggle the div closed. Any help would be appreciated.
Below is my code as well as a simple jsfiddle example.
https://jsfiddle.net/ewsrq961/1/
Thank you.
HTML:
<hr id="hrItem">
<div id="actionItems">
<h2>Hello There!</h2>
</div>
<div id="actionsBtn">
<a id="btnAction" href="javascript:void(0)" rel="tooltip" title="Open Actions" class="btn faa-vertical animated-hover" data-original-title="Open Actions"><i class="fa fa-chevron-circle-down" aria-hidden="true" style="padding-right: 10px;"></i>Actions</a>
</div>
CSS:
#actionItems {
display: none;
padding-bottom: 15px;
}
#actionsBtn {
text-align: center;
background-color: #252d44;
width: 120px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
margin: 0 auto;
margin-top: 0px;
margin-bottom: 0px;
margin-top: 0;
margin-bottom: 20px;
color: #fff !important;
padding:5px;
}
#actionsBtn a {
color: #fff;
}
JS:
// Hide/Show div
$("#btnAction").click(function(){
$("#actionItems").slideToggle();
$(this).find('i').toggleClass('fa-chevron-circle-down fa-chevron-circle-up')
});

While you have id #hrItem to hr so its simple to add css style for it with display : none; and then add #hrItem to classes to slideToggle in js code
// Hide/Show Actions Panel
$("#btnAction").click(function(){
$("#actionItems , #hrItem").slideToggle(); //<<<< add hr id
$(this).find('i').toggleClass('fa-chevron-circle-down fa-chevron-circle-up')
});
#hrItem{ /* style hr*/
display : none;
}
#actionItems {
display: none;
padding-bottom: 15px;
}
#actionsBtn {
text-align: center;
background-color: #252d44;
width: 120px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
margin: 0 auto;
margin-top: 0px;
margin-bottom: 0px;
margin-top: 0;
margin-bottom: 20px;
color: #fff !important;
padding:5px;
}
#actionsBtn a {
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<hr id="hrItem">
<div id="actionItems">
<h2>Hello There!</h2>
</div>
<div id="actionsBtn">
<a id="btnAction" href="javascript:void(0)" rel="tooltip" title="Open Actions" class="btn faa-vertical animated-hover" data-original-title="Open Actions">
<i class="fa fa-chevron-circle-down" aria-hidden="true" style="padding-right: 10px;"></i>
Actions
</a>
</div>

I think you want to show it when the div is closed and hide when the div is option then you can just call .toggle() function on click and it will hide on first click and show on each second click.
$('#hrItem').toggle();
Example:
// Hide/Show Actions Panel
$("#btnAction").click(function(){
$("#actionItems").slideToggle();
$('#hrItem').toggle(); //ADDED
$(this).find('i').toggleClass('fa-chevron-circle-down fa-chevron-circle-up')
});
#actionItems {
display: none;
padding-bottom: 15px;
}
#actionsBtn {
text-align: center;
background-color: #252d44;
width: 120px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
margin: 0 auto;
margin-top: 0px;
margin-bottom: 0px;
margin-top: 0;
margin-bottom: 20px;
color: #fff !important;
padding:5px;
}
#actionsBtn a {
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<hr id="hrItem">
<div id="actionItems">
<h2>Hello There!</h2>
</div>
<div id="actionsBtn">
<a id="btnAction" href="javascript:void(0)" rel="tooltip" title="Open Actions" class="btn faa-vertical animated-hover" data-original-title="Open Actions"><i class="fa fa-chevron-circle-down" aria-hidden="true" style="padding-right: 10px;"></i>Actions</a>
</div>

You could add a conditional in the click event that would adjust the <hr/> based on visibility:
// Hide/Show Actions Panel
$("#btnAction").click(function() {
$('#hrItem').is(':visible') ? $('#hrItem').hide() : $('#hrItem').show();
$("#actionItems").slideToggle();
$(this).find('i').toggleClass('fa-chevron-circle-down fa-chevron-circle-up');
});
#actionItems {
display: none;
padding-bottom: 15px;
}
#actionsBtn {
text-align: center;
background-color: #252d44;
width: 120px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
margin: 0 auto;
margin-top: 0px;
margin-bottom: 0px;
margin-top: 0;
margin-bottom: 20px;
color: #fff !important;
padding: 5px;
}
#actionsBtn a {
color: #fff;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<hr id="hrItem">
<div id="actionItems">
<h2>Hello There!</h2>
</div>
<div id="actionsBtn">
<a id="btnAction" href="javascript:void(0)" rel="tooltip" title="Open Actions" class="btn faa-vertical animated-hover" data-original-title="Open Actions"><i class="fa fa-chevron-circle-down" aria-hidden="true" style="padding-right: 10px;"></i>Actions</a>
</div>

Bootstrap Tooltip working but hidden due to z-index?

If you hover over the first pencil, you can see the tooltip coming up but it's hidden.
How can I tell all tooltips to show up above everything else?
Relevant code
$('.nav-text').on('click', null, function () {
alert('heyo');
});
$('.nav-text').tooltip({
'placement': 'right',
'title': 'heyo'
});
Complete example
$('.down').click(function() {
var $move = $('.side-study-box ul');
$move.css({
top: '-=20px'
})
})
$('.up').click(function() {
var $move = $('.side-study-box ul');
$move.css({
top: '+=20px'
})
})
$('.nav-text').on('click', null, function() {
alert('heyo');
});
$('.nav-text').tooltip({
'placement': 'right',
'title': 'heyo'
});
.side-study-box {
background-color: white;
color: black;
border: 1px solid #3D6AA2;
text-align: center;
height: 160px;
display: table !important;
margin: 0px !important;
margin-left: -1px !important;
}
.side-study-box .viewport {
height: 120px;
overflow: hidden;
position: relative;
}
.side-study-box span {
position: relative;
width: 100%;
font-size: 24px;
display: table-cell;
vertical-align: middle;
}
.side-study-box textarea {
position: relative;
height: 195px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
margin: auto;
font-size: 18px;
font-family: Consolas, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New;
display: table-cell;
vertical-align: middle;
resize: none;
}
.side-study-box i {
margin: 0px !important;
padding-right: 1px;
}
.side-study-box .side-box-menu {
border-right: 1px solid #335987;
width: 28px;
text-align: center;
height: 100%;
}
.side-box-menu-nav {
display: inline-block;
cursor: pointer;
text-decoration: none !important;
margin: 0px;
width: 100%;
background-color: #3D6AA2;
color: white;
}
.side-box-menu-nav:hover {
background-color: #335987 !important;
color: white !important;
}
.side-study-box ul {
list-style-type: none;
margin: 0px;
margin-left: -1px !important;
padding: 0px;
padding-right: 2px;
height: 100%;
color: #335987;
position: absolute;
top: 0;
}
.side-study-box ul li {
margin: 0px;
}
.side-study-box ul li :hover {
color: black;
}
.side-study-box ul li a {
padding-left: 3px;
cursor: pointer;
text-decoration: none;
display: inline-block;
margin: 0px;
color: gray;
}
.side-study-box ul li a .side-box-menu-control {
padding-top: 3px;
height: 23px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<div class="span4 side-study-box">
<div class="side-box-menu"> <a class="side-box-menu-nav up"><i class="icon-chevron-up icon-white"></i></a>
<div class='viewport'>
<ul>
<li><a class="side-box-menu-control"><i class="icon-facetime-video "></i></a>
</li>
<li><a class="side-box-menu-control"><i class="icon-picture"></i></a>
</li>
<li><a class="side-box-menu-control"><i class="icon-headphones "></i></a>
</li>
<li><a class="side-box-menu-control nav-text"><i class="icon-pencil "></i></a>
</li>
<li><a class="side-box-menu-control"><i class="icon-pencil "></i></a>
</li>
<li><a class="side-box-menu-control"><i class="icon-pencil "></i></a>
</li>
<li><a class="side-box-menu-control"><i class="icon-pencil "></i></a>
</li>
<li><a class="side-box-menu-control"><i class="icon-hdd"></i></a>
</li>
<li><a class="side-box-menu-control"><i class="icon-hdd"></i></a>
</li>
<li><a class="side-box-menu-control"><i class="icon-hdd"></i></a>
</li>
</ul>
</div><a class="side-box-menu-nav down"><i class="icon-chevron-down icon-white"></i></a>
</div>
</div>

Just set the tooltip position to fixed, like this:
.tooltip {
position: fixed;
}
See working demo

Just set data-container.
<a href="#" data-toggle="tooltip" data-container="body" title="first tooltip">
hover over me</a>

Don't use position: fixed for this, it looks like it works but will cause problems later on.
In your case, the best option would be to append the tooltip to the body (as mentionned by #machineaddict in a comment) to ensure it follows the pencil on scroll, which fixed positioning won't.
$('.nav-text').tooltip({
placement: 'right',
title: 'heyo',
container: 'body' //<--- use the container option
});
You could even be more specific and use container: '.side-study-box' to ensure the tooltip follows its div even if the whole box scrolls independently from the body. Just make sure the container has position: relative.
As mentioned in Diego's answer, you can use any option above as a data attribute:
<a class="nav-text"
data-toggle="tooltip"
data-container=".side-study-box"
data-placement="right"
title="heyo">
...
</a>
Tooltip that Follows a div with overflow scroll
I added a .container div around the original snippet, made it small to force scrolling on overflow. You can see the tooltip follows the pencil icon when scrolling.
$('.nav-text').click(function() {
console.log('heyo');
}).tooltip({
placement: 'right',
title: 'heyo',
// follows the box even if it is scrolled within the container div.
container: '.container',
});
.container {
height: 100px;
overflow: scroll;
position: relative;
}
.side-study-box {
background-color: white;
color: black;
border: 1px solid #3D6AA2;
text-align: center;
height: 160px;
display: table !important;
margin: 0px !important;
margin-left: -1px !important;
}
.side-study-box .viewport {
height: 120px;
overflow: hidden;
position: relative;
}
.side-study-box span {
position: relative;
width: 100%;
font-size: 24px;
display: table-cell;
vertical-align: middle;
}
.side-study-box textarea {
position: relative;
height: 195px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
margin: auto;
font-size: 18px;
font-family: Consolas, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New;
display: table-cell;
vertical-align: middle;
resize: none;
}
.side-study-box i {
margin: 0px !important;
padding-right: 1px;
}
.side-study-box .side-box-menu {
border-right: 1px solid #335987;
width: 28px;
text-align: center;
height: 100%;
}
.side-box-menu-nav {
display: inline-block;
cursor: pointer;
text-decoration: none !important;
margin: 0px;
width: 100%;
background-color: #3D6AA2;
color: white;
}
.side-box-menu-nav:hover {
background-color: #335987 !important;
color: white !important;
}
.side-study-box ul {
list-style-type: none;
margin: 0px;
margin-left: -1px !important;
padding: 0px;
padding-right: 2px;
height: 100%;
color: #335987;
position: absolute;
top: 0;
}
.side-study-box ul li {
margin: 0px;
}
.side-study-box ul li :hover {
color: black;
}
.side-study-box ul li a {
padding-left: 3px;
cursor: pointer;
text-decoration: none;
display: inline-block;
margin: 0px;
color: gray;
}
.side-study-box ul li a .side-box-menu-control {
padding-top: 3px;
height: 23px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<div class="container">
<div class="span4 side-study-box">
<div class="side-box-menu"><a class="side-box-menu-nav up"><i class="icon-chevron-up icon-white"></i></a>
<div class='viewport'>
<ul>
<li><a class="side-box-menu-control"><i class="icon-facetime-video "></i></a>
</li>
<li><a class="side-box-menu-control"><i class="icon-picture"></i></a>
</li>
<li><a class="side-box-menu-control"><i class="icon-headphones "></i></a>
</li>
<li><a class="side-box-menu-control nav-text"><i class="icon-pencil "></i></a>
</li>
<li><a class="side-box-menu-control"><i class="icon-pencil "></i></a>
</li>
<li><a class="side-box-menu-control"><i class="icon-pencil "></i></a>
</li>
<li><a class="side-box-menu-control"><i class="icon-pencil "></i></a>
</li>
<li><a class="side-box-menu-control"><i class="icon-hdd"></i></a>
</li>
<li><a class="side-box-menu-control"><i class="icon-hdd"></i></a>
</li>
<li><a class="side-box-menu-control"><i class="icon-hdd"></i></a>
</li>
</ul>
</div><a class="side-box-menu-nav down"><i class="icon-chevron-down icon-white"></i></a>
</div>
</div>
</div>

This is best solution if you are using angular uib-bootstrap: Use dependency injection for $uibTooltipProvider, you can change the way tooltips and popovers behave by default; the attributes above always take precedence:
$uibTooltipProvider.options({
appendToBody: true
});

if we add the attribute container="body" into your html tag then it's not moving with html element on page scroll

If building bootstrap (4.5) with npm (SASS), you can adjust $zindex-tooltip variable in your own variables.scss file.
in bootstrap 4.5 node_modules/bootstrap/scss/_variables.scss #line 690
$zindex-tooltip: 1070 !default;
BTW, you can find all variables in that file

Position: Fixed !important; works here, but don't forget !important in some cases.

just add the attribute container="body" into your html tag