We Keep Coding

How to use javascript to click on an element to open a new webpage and close the original popup window？

At present, I encounter a requirement at work that I don’t know how to implement. I hope that when I click on the notice_item block, it can be closed, the entire notice_dialog block, and a new web page will be opened! Of course, click the show_dialog button at the beginning again to open the notice_dialog block again. But I can't write anything, it's really troublesome ~ The attached picture is the range I want to click (red), and then click to open a new web page in href, and close the green element. I would be very grateful for everyone's help.
const Dialog = $(".notice_dialog");
$(".notice_content").on("click", function(e) {
if (!e.target.closest(".notice_dialog")) {
Dialog.toggle();
}
e.stopPropagation();
});
$(document).on("click", function(e) {
Dialog.hide();
});
// Switch between general tab and order ta
let nav = document.querySelector(".nav");
let buttons = nav.querySelectorAll("button");
let contents = document.querySelectorAll(".notice_content_type");
for (let i = 0; i < buttons.length; i++) {
buttons[i].setAttribute("data-index", i);
buttons[i].onclick = function() {
for (let i = 0; i < buttons.length; i++) {
buttons[i].className = "";
}
//Add the clicked style to yourself
this.className = "active";
//Set the dataindex attribute and index numbe
let index = this.getAttribute("data-index", i);
for (let i = 0; i < contents.length; i++) {
contents[i].style.display = "none";
}
contents[index].style.display = "block";
};
}
body {
padding: 30px;
}
.notice_content {
position: relative;
}
.notice_content .notice_center {
display: block;
position: relative;
background-repeat: no-repeat;
background-size: contain;
}
.notice_content .notice_center .notice_center-num {
display: inline-block;
position: absolute;
top: -8px;
left: 8px;
padding: 0px 4px;
font-size: 12px;
line-height: 1.5;
border-radius: 12px;
background-color: yellow;
color: #222;
}
.notice_content .notice_dialog {
display: none;
width: 346px;
max-height: 464px;
position: absolute;
top: 31px;
left: 12px;
z-index: 999;
background-color: #fff;
border-radius: 8px;
border: 1px solid #222;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.05);
padding: 20px 0px 8px 0px;
}
.notice_content .notice_dialog .head {
display: flex;
justify-content: space-between;
line-height: 1.5;
letter-spacing: 0.56px;
padding: 0px 24px 4px;
}
.notice_content .notice_dialog .head .title {
font-size: 16px;
font-weight: 500;
}
.notice_content .notice_dialog .head .all_read {
font-size: 12px;
letter-spacing: 1px;
line-height: 1.5;
}
.notice_content .notice_dialog .nav {
display: flex;
padding: 0px 24px;
border-bottom: 1px solid #ccc;
}
.notice_content .notice_dialog .nav button {
display: flex;
align-items: center;
padding: 8px 16px;
}
.notice_content .notice_dialog .nav button .nav_link {
font-size: 14px;
line-height: 1.5;
}
.notice_content .notice_dialog .nav button .notice_num {
background-color: #ccc;
color: 222;
font-size: 12px;
font-weight: 500;
padding: 4px 6px 4px 6px;
border-radius: 10px;
margin-left: 8px;
}
.notice_content .notice_dialog .nav .active {
border-bottom: 2px solid #222;
}
.notice_content .notice_dialog .nav .active .notice_num {
color: #222;
background-color: orange;
}
.notice_content .notice_dialog .notice_content_type {
display: none;
height: 336px;
background-color: #222;
overflow-y: scroll;
}
.notice_content .notice_dialog .notice_content_type::-webkit-scrollbar {
display: none;
}
.notice_content .notice_dialog .notice_content_type li {
text-align: left;
}
.notice_content .notice_dialog .notice_content_type li .notice_item {
display: flex;
align-items: center;
padding: 16px;
text-align: left;
line-height: 1.5;
background-color: #ccc;
border-bottom: 1px solid #222;
}
.notice_content .notice_dialog .notice_content_type li .notice_item:hover {
background-color: yellow;
}
.notice_content .notice_dialog .notice_content_type li .notice_item .info_icon {
width: 32px;
height: 32px;
margin-right: 16px;
}
.notice_content .notice_dialog .notice_content_type li .notice_item .info_title {
font-size: 14px;
font-weight: 500;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 4px;
}
.notice_content .notice_dialog .notice_content_type li .notice_item .info_main {
font-size: 12px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
color: #222;
margin-bottom: 6px;
letter-spacing: 0.56px;
}
.notice_content .notice_dialog .notice_content_type li .notice_item .time {
font-size: 12px;
color: #ccc;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="notice_content">
<button class="notice_center">
show_dialog
</button>
<div class="notice_dialog">
<div class="head">
<h2 class="title">notice</h2>
<button class="all_read">all read</button>
</div>
<ul class="nav">
<button class="active">
<p class="nav_link">generally</p><span class="notice_num">99+</span>
</button>
<button>
<p class="nav_link">orde</p><span class="notice_num">99+</span>
</button>
</ul>
<ul class="notice_content_type" style="display: block">
<li>
<a class="notice_item unread" href="www.google.com" target="_blank">
<div class="notice_content">
<h3 class="info_title">GENERALLY TITLE</h3>
<p class="info_main">CONTENT.....</p>
</div>
</a>
</li>
<li>
<a class="notice_item" href="www.google.com" target="_blank">
<div class="notice_content">
<h3 class="info_title">GENERALLY TITLE</h3>
<p class="info_main">CONTENT.....</p>
</div>
</a>
</li>
<li>
<a class="notice_item unread" href="www.google.com" target="_blank">
<div class="notice_content">
<h3 class="info_title">GENERALLY TITLE</h3>
<p class="info_main">CONTENT.....</p>
</div>
</a>
</li>
<li>
<a class="notice_item" href="www.google.com" target="_blank">
<div class="notice_content">
<h3 class="info_title">GENERALLY TITLE</h3>
<p class="info_main">CONTENT.....</p>
</div>
</a>
</li>
</ul>
<ul class="notice_content_type">
<li>
<a class="notice_item" href="www.google.com" target="_blank">
<div class="notice_content">
<h3 class="info_title">ORDER TITLE</h3>
<p class="info_main">CONTENT.....</p>
</div>
</a>
</li>
<li>
<a class="notice_item" href="www.google.com" target="_blank">
<div class="notice_content">
<h3 class="info_title">ORDER TITLE</h3>
<p class="info_main">CONTENT.....</p>
</div>
</a>
</li>
<li>
<a class="notice_item" href="www.google.com" target="_blank">
<div class="notice_content">
<h3 class="info_title">ORDER TITLE</h3>
<p class="info_main">CONTENT.....</p>
</div>
</a>
</li>
</ul>
</div>
</div>

I'm not sure if I understood you correctly, but I think the issue lies within your first click handler:
$(".notice_content").on("click", function(e) { // here you say a click anywhere in the outermost div triggers this handler
if (!e.target.closest(".notice_dialog")) { // this is IMHO a strange way to target the button, it would be more precise if you bind that toggle directly to the button
Dialog.toggle();
}
e.stopPropagation(); // now you are preventing any click on your dialog to bubble up, thus it never reaches the document and therefore never triggers the Dialog.hide()
});
So I think it would be clearer if you structure it like this:
// click handler for the button (.notice_center) and the item (.notice_item)
// => will close the dialog on click of the button or an item
$(".notice_center, .notice_item").on("click", function(e) {
Dialog.toggle();
e.stopPropagation();
});
// prevent closing the dialog for clicking anywhere in the dialog but the button or an item
$(".notice_content").on("click", function(e) {
e.stopPropagation();
});
I didn't test it, but this should be the solution, because then you're not relying on the click event on the item to bubble up (which it didn't due to the stopPropagation call).

About jquery Click to add CSS and other elements to remove CSS. How to do it?

I have a project that when I click titleA, all blocks of titleA must be added with a yellow style, and when titleB is clicked, a yellow style must be added to the titleB page, and the yellow style of titleA will be removed!
But I don’t know this. How to achieve the effect, I need some help from everyone, thank you.
$('#js-title1').on('click',function(){
$('#js-title1').addClass('active'); //點擊到的增加樣式
　$('#js-title2').removeClass('active') //同層其他元素移除樣式
})
body {
padding: 30px;
}
.wrap {
display: flex;
margin-bottom: 100px;
}
.wrap .demo {
font-weight: 900;
margin: 30px;
text-decoration: none;
color: #222;
}
.wrap-2 {
display: flex;
}
.wrap-2 .demo {
font-weight: 900;
margin: 30px;
text-decoration: none;
color: #222;
}
.active {
position: relative;
}
.active::after {
content: "";
position: absolute;
bottom: 2px;
left: 0;
right: 0;
display: block;
width: 50px;
height: 8px;
background: #FFEB50;
z-index: -1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="wrap">
<li>
titleA
</li>
<li>
titleB
</li>
</ul>
<ul class="wrap-2">
<li>
titleA
</li>
<li>
titleB
</li>
</ul>

There are multiple js-title1 & js-title2, do not use ID, consider to use css class name.
$('.js-title1').on('click',function(){
$('.js-title1').addClass('active'); //點擊到的增加樣式
　$('.js-title2').removeClass('active') //同層其他元素移除樣式
})
$('.js-title2').on('click',function(){
$('.js-title2').addClass('active'); //點擊到的增加樣式
　$('.js-title1').removeClass('active') //同層其他元素移除樣式
})
body {
padding: 30px;
}
.wrap {
display: flex;
margin-bottom: 100px;
}
.wrap .demo {
font-weight: 900;
margin: 30px;
text-decoration: none;
color: #222;
}
.wrap-2 {
display: flex;
}
.wrap-2 .demo {
font-weight: 900;
margin: 30px;
text-decoration: none;
color: #222;
}
.active {
position: relative;
}
.active::after {
content: "";
position: absolute;
bottom: 2px;
left: 0;
right: 0;
display: block;
width: 50px;
height: 8px;
background: #FFEB50;
z-index: -1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="wrap">
<li>
titleA
</li>
<li>
titleB
</li>
</ul>
<ul class="wrap-2">
<li>
titleA
</li>
<li>
titleB
</li>
</ul>

IDs must be unique. You can't have more than one on the same page. Perhaps use a data attribute instead. Here's a stripped down example.
// When any title is clicked on
$('.demo').on('click', function() {
// Get the id from the dataset
const id = $(this).data('id');
// Remove all the active classes
$('.demo').removeClass('active');
// Add a class to all those elements that
// have a data-id that matches the id
$(`[data-id="${id}"`).addClass('active');
});
.active { background: #FFEB50; }
.demo:hover { cursor: pointer; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="demo" data-id="js-title1">titleA</a>
<a class="demo" data-id="js-title2">titleB</a>
<a class="demo" data-id="js-title1">titleA</a>
<a class="demo" data-id="js-title2">titleB</a>
Additional documentation
Template/string literals

Instead of the id attribute use the class attribute
and in jQuery, get the elements with . instead of #

Other than unique ids you should use ‘event.currentTarget’ or ‘$(this)’ to refer to the element and can use ‘.toggleClass()’ to toggle classes. This will simplify the code and logic.
const groups=[$("[id=js-title2]"), $("[id~='js-title1']")]
groups[0].on('click',function(e){
groups[0].toggleClass('active');
groups[1].removeClass('active');
})
groups[1].on('click',function(e){
groups[0].removeClass('active');
groups[1].toggleClass('active');
})
body {
padding: 30px;
}
.wrap {
display: flex;
margin-bottom: 100px;
}
.wrap .demo {
font-weight: 900;
margin: 30px;
text-decoration: none;
color: #222;
}
.wrap-2 {
display: flex;
}
.wrap-2 .demo {
font-weight: 900;
margin: 30px;
text-decoration: none;
color: #222;
}
.active {
position: relative;
}
.active::after {
content: "";
position: absolute;
bottom: 2px;
left: 0;
right: 0;
display: block;
width: 50px;
height: 8px;
background: #FFEB50;
z-index: -1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="wrap">
<li>
titleA
</li>
<li>
titleB
</li>
</ul>
<ul class="wrap-2">
<li>
titleA
</li>
<li>
titleB
</li>
</ul>

How to make dropdown menu onclick and close when clicking outside element with Vanilla javascript only?

I'm trying to make dropdown menu onlick and close its menu when clicking outside element.
When i clicked on the News element it doesn't show anything.
I would like it to show when it's clicked and close it's menu when clicking anywhere.
function dropDownMenu() {
var btnNavNews = document.querySelector('.nav__news');
var dropNewSub = document.querySelector('.nav__news__sub');
btnNavNews.addEventListener('click', function () {
dropNewSub.classList.toggle('show');
})
document.addEventListener('click', function (e) {
if (e.target != btnNavNews && e.target.parentNode != dropNewSub) {
dropNewSub.classList.remove('show');
}
})
}
dropDownMenu();
/*Block*/
.nav li {
display: inline-block;
list-style: none;
color: black;
width: 100px;
height: auto;
border: 1px solid red;
font-size: 20px;
text-align: center;
}
/*Element*/
.nav__news__sub {
display: none;
width: 100%;
}
.nav__news__sub__ul {
display: flex;
position: absolute;
width: 70%;
height: 50%;
padding-bottom: 2%;
margin-top: 1%;
padding-right: 2%;
align-items: center;
justify-content: space-evenly;
background-color: grey;
}
.nav__news__sub__ul li {
width: 30%;
height: 50%;
margin-bottom: 10%;
}
.nav__content {
border: solid 1px blue;
margin-top: 50%;
}
.show {
display: block;
}
.nav__item a {
display: block;
}
.nav__item li {
text-align: left;
}
<html>
<head>
<link rel="stylesheet" href="index.css">
<script src="index.js" defer></script>
</head>
<body>
<ul class="nav">
<li Home</li>
<li class="nav__news" News
<div class="nav__news__sub">
<ul class="nav__news__sub__ul">
<li class="img" Example
<div class="nav__content">
<h1>Topic</h1>
</div>
</li>
<li Example2</li>
<li Example3</li>
</ul>
</div>
</li>
</ul>
</body>
</html</html>
Update my code is now works fine, i used wrong variable and change toggle method to remove method

You just used a wrong variable. You should use btnNavNews instead.
Although fixed, I think this logic is still wrong as it will toggle the dropdown if you click anywhere.
function dropDownMenu() {
var btnNavNews = document.querySelector('.nav__news');
var dropNewSub = document.querySelector('.nav__news__sub');
btnNavNews.addEventListener('click', function() {
dropNewSub.classList.toggle('show');
})
document.addEventListener('click', function(e) {
if (e.target != btnNavNews && e.target.parentNode != btnNavNews) {
dropNewSub.classList.toggle('show');
}
})
}
dropDownMenu();
/*Block*/
.nav li {
display: inline-block;
list-style: none;
color: black;
width: 100px;
height: auto;
border: 1px solid red;
font-size: 20px;
text-align: center;
}
/*Element*/
.nav__news__sub {
display: none;
width: 100%;
}
.nav__news__sub__ul {
display: flex;
position: absolute;
width: 70%;
height: 50%;
padding-bottom: 2%;
margin-top: 1%;
padding-right: 2%;
align-items: center;
justify-content: space-evenly;
background-color: grey;
}
.nav__news__sub__ul li {
width: 30%;
height: 50%;
margin-bottom: 10%;
}
.nav__content {
border: solid 1px blue;
margin-top: 50%;
}
.show {
display: block;
}
.nav__item a {
display: block;
}
.nav__item li {
text-align: left;
}
<ul class="nav">
<li Home
</li>
<li class="nav__news" News
<div class="nav__news__sub">
<ul class="nav__news__sub__ul">
<li class="img" Example
<div class="nav__content">
<h1>Topic</h1>
</div>
</li>
<li Example2
</li>
<li Example3
</li>
</ul>
</div>
</li>
</ul>
I suggest you use remove instead so that the dropdown will be hidden when you click anywhere else other than the "News" button:
function dropDownMenu() {
var btnNavNews = document.querySelector('.nav__news');
var dropNewSub = document.querySelector('.nav__news__sub');
btnNavNews.addEventListener('click', function() {
dropNewSub.classList.toggle('show');
})
document.addEventListener('click', function(e) {
if (e.target != btnNavNews && e.target.parentNode != btnNavNews) {
dropNewSub.classList.remove('show');
}
})
}
dropDownMenu();
/*Block*/
.nav li {
display: inline-block;
list-style: none;
color: black;
width: 100px;
height: auto;
border: 1px solid red;
font-size: 20px;
text-align: center;
}
/*Element*/
.nav__news__sub {
display: none;
width: 100%;
}
.nav__news__sub__ul {
display: flex;
position: absolute;
width: 70%;
height: 50%;
padding-bottom: 2%;
margin-top: 1%;
padding-right: 2%;
align-items: center;
justify-content: space-evenly;
background-color: grey;
}
.nav__news__sub__ul li {
width: 30%;
height: 50%;
margin-bottom: 10%;
}
.nav__content {
border: solid 1px blue;
margin-top: 50%;
}
.show {
display: block;
}
.nav__item a {
display: block;
}
.nav__item li {
text-align: left;
}
<ul class="nav">
<li Home
</li>
<li class="nav__news" News
<div class="nav__news__sub">
<ul class="nav__news__sub__ul">
<li class="img" Example
<div class="nav__content">
<h1>Topic</h1>
</div>
</li>
<li Example2
</li>
<li Example3
</li>
</ul>
</div>
</li>
</ul>

Need to make box relative to header HTML CSS?

I have a header and I need a small menu box below it, I'm trying to make sure I won't need to use top in css, and I can just add a line break in HTML. I have the following code for the header, the global_tools_menu is the menu I'm trying to add. For some reason, it starts from the top of the page? How would I make it start from just below the header? Here's the codeHTML:
<div class="global_header">
<b><p>ex</p></b>
<header>
<ul class="nav-bar">
<li class="nav-item global_tools" onclick="tools()"><a><img src="/ex/assets/tools.png" width="20px"/></a></li>
<?php
if(isset($_SESSION['id'])) {
echo '<li class="nav-item right-3826" onclick="redirect(`myaccount`);"><a>My Account</a></li>';
echo '<li class="nav-item right-3826" onclick="redirect(`scripts/logout.php`);"><a>Logout</a></li>';
}
if(!isset($_SESSION['id'])) {
echo '<li class="nav-item right-3826" onclick="redirect(`login`);"><a>Log in</a></li>';
echo '<li class="nav-item right-3826" onclick="redirect(`signup`)";><a>Sign Up</a></li>';
}
?>
<li class="nav-item" onclick="redirect('');"><a>Home</a></li>
<li class="nav-item" onclick="redirect('all');"><a>All</a></li>
<li class="nav-item" onclick="redirect('search');"><a>Search</a></li>
</ul>
</header>
</div><br>
<div id="global_tools_menu">
<div id="global_tools_true">
</div>
<div id="global_tools_false">
</div>
</div>
CSS:
.tools {
background-image: url('assets/tools.png');
}
a {
color: #009AFF;
text-decoration: none;
}
body {
font-family: 'PT-Sans', sans-serif;
}
.nav-bar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #009AFF;
height: 30px;
border: 1px solid;
}
.nav-item {
display: block;
color: #fff;
text-align: center;
padding: 6px 8px;
width: calc(2px + 13%);
text-decoration: none;
float: left;
border-right: 1px solid #000;
cursor: pointer;
background-color: #0050FF;
}
.nav-item a {
color: white;
}
.nav-item:hover {
background-color: #0039B5;
}
.right-3826 {
float: right;
border-right: 0px solid;
border-left: 1px solid #000;
}
input:focus {
outline: none;
}
.global_header p {
position: relative;
font-size: 70px;
cursor: pointer;
text-align: center;
margin-bottom: 20px;
vertical-align: middle;
top: -20px;
color: white;
}
.global_header {
background-color: #009AFF;
word-wrap: break-word;
position: absolute;
top: 0px;
width: 100%;
left: 0;
}
.global_tools {
background-color: white;
}
.global_tools:hover {
background-color: #EAEAEA;
}
#global_tools_menu {
position: relative;
width: 400px;
height: 700px;
background-color: #080808;
Here is a JSFiddle for that. I need to make that black box start from below the header?
https://jsfiddle.net/qypm88dm/

I don't know if this is the answer you were looking for but I would do this,
add
<div class="blank"></div>
just below
<div class="global_header">
...
</div>
so it would be
<div class="global_header">
...
</div>
<div class="blank"></div>
and css would be
.blank {
height: 190px;
width: 100%;
}
https://jsfiddle.net/qypm88dm/2/

Set the position of global_tools_menu to inline instead of absolute or relative because those are in reference to the top left of the page, which is why it is up at the top. If you set it to inline it will pop down right below your header.
Edit: My mistake, that will set it behind it, but if you do that and then give it margin-top: 200px that will get it below it. But that may not be the exact fix you want.

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