We Keep Coding

Is it possible to display respective country flag to out side of the select function. Or Can we display country flag on the both place

function onChangeCallback(ctr) {
console.log("The country was changed: " + ctr);
//$("#selectionSpan").text(ctr);
}
$(document).ready(function() {
$(".niceCountryInputSelector").each(function(i, e) {
new NiceCountryInput(e).init();
});
});
.container {
margin: 80px auto !important;
padding: 15px;
}
.bg-box1 {
background-color: #E8E8E8;
padding: 30px;
/* width: 460px;*/
width: 700px;
box-shadow: 3px 3px 5px #808080;
border-radius: 6px;
}
.bg-box {
box-shadow: 1px 1px 3px #484848;
border-radius: 6px;
}
select {
border-radius: 6px;
}
.search {
src: url(img/search.png);
}
.niceCountryInputMenu {
background: white !important;
color: black !important;
border: 1px solid #a8a8a8;
cursor: pointer;
border-radius: 4px;
box-shadow: 1px 1px 3px #808080
/*
font-family: Arial;
font-size: 12px;
*/
}
.niceCountryInputMenuDefaultText {
width: 270px;
padding: 6px;
margin: 6px 0px 0px 15px;
display: inline-block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 1.1rem;
}
.niceCountryInputMenuDefaultText a:hover {
text-decoration: none;
}
.niceCountryInputMenu a {
color: #787878 !important;
}
.niceCountryInputMenuDropdown {
/*border-left: 1px solid #a8a8a8;*/
height: 30px;
width: 25px;
float: right;
line-height: 30px;
padding: 8px;
text-align: center;
position: relative;
right: 0;
color: #484848;
}
.niceCountryInputMenuDropdownContent {
border: 1px solid #a8a8a8;
background-color: #fff;
font-size: 1.1rem;
border-top: 0;
max-height: 200px;
overflow-y: scroll;
overflow-x: hidden;
}
.niceCountryInputMenuDropdownContent a {
height: 40px;
line-height: 40px;
display: block;
width: 100%;
color: #787878 !important;
overflow: hidden;
text-decoration: none;
border: 1px solid #F5F5F5;
/*
font-family: Arial;
font-size: 12px;
*/
}
.niceCountryInputMenuDropdownContent a:hover {
background-color: #63a2d7 !important;
color: white !important;
text-decoration: none;
}
.niceCountryInputMenuFilter {
border: 1px solid #a8a8a8;
border-top: -10;
border-bottom: 0;
}
.niceCountryInputMenuFilter input {
width: 100%;
width: calc(100% - 10px);
margin: 5px;
padding: 10px;
border: 1px solid #ccc;
outline: none;
border-radius: 6px;
font-size: 1.1rem;
color: #808080;
}
.niceCountryInputMenuCountryFlag {
border: 1px solid #d3d3d3;
width: 23px;
height: 18px;
margin-left: 5px;
margin-right: 5px;
}
.niceCountryInputMenuCountryNoFlag {
display: inline-block;
border: 1px solid black;
background: white;
color: black;
line-height: 15px;
text-align: center;
width: 22px;
margin-left: 5px;
margin-right: 5px;
font-size: 13px;
}
<script src="https://manishasecurity.in/creative-js/niceCountryInput.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<h3>Select a Country:</h3>
<div class="bg-box1">
<div class="row">
<div class="col-4">
<div style="background-color: #fff; width: 160px; height: 50px;margin-top: 0px; padding: 4px; border-radius: 6px;font-size: 12px;" data-showflags="true" class=""></div>
</div>
<div class="col-8">
<div class="niceCountryInputSelector bg-box" style="width: 400px;" data-selectedcountry="ad" data-showspecial="false" data-showflags="true" data-i18nall="All selected" data-i18nnofilter="No selection" data-i18nfilter="Search Country..." data-onchangecallback="onChangeCallback" />
</div>
</div>
</div>
</div>
Hi,
I have made the country flag dropdown list.
In the dropdown list, whether it is scroll by mouse or search country name in the search box, the country will be autocompleted and it will be displayed in the input field with the country name and flag.
The dropdown function working properly.
Requirement:-
Without removing its Name and flag from the dropdown section, Can we display Country Flag outside of the dropdown section?. I am trying for that but I am not able to do that.
I hope someone can understand and help me out in this situation.
Thanks Lots

I modified the function onChangeCallback to place the flag to the other div.
function onChangeCallback(ctr) {
let flag=$(".niceCountryInputSelector").find("[data-flagiso='"+ctr+"']")[0];
flag=$(flag).clone();
$(".col-4").children("div:first-child").empty();
$(".col-4").children("div:first-child").append(flag);
}
So, you can append the flagObjElement to where you want to append.

How to make tooltips visible on clicking an icon and hidden when clicking the same icon?

I want to show tooltips at three different places when clicking an info icon. And disable the tooltips by clicking the icon once again. How can I achieve this by using HTML and jQuery? Say in the below example, I click Add and it shows me those 3 tooltips, and clicking on Add again hides them.
EDIT : Code that I tried
HTML
<div id="info-info">
<i class="fa fa-info-circle" ></i>
<div class="tip" data-toggle="tooltip" data-trigger="click">Info 1</div>
<div class="tip1">Info 2</div>
<div class="tip2">Info 3</div>
</div>
JS
$(".info").click(function(){
var left = $("i", this).offset().left + ($("i", this).width() / 2) - ($(".tip", this).width() / 2);
$(".tip", this).toggle();
$(".tip1", this).toggle()
$(".tip2", this).toggle();
});
CSS
#info-info {
float: left;
height: 50px;
padding: 9px 0px 0px 10px;
text-align: left;
letter-spacing: 0;
color: #FFFFFF;
opacity: 1;
text-decoration: none;
font-size: 18px;
}
#info-info .tip {
display: none;
position: absolute;
border: 1px solid #333;
border-radius: 2px;
padding-left: 3px;
margin-left: 300px;
left: 900px;
color: #000000;
}
#info-info .tip1 {
display: none;
position: absolute;
border: 1px solid #333;
border-radius: 2px;
padding-left: 3px;
margin-left: 300px;
left: 1px;
color: #000000;
}
#info-info .tip2 {
display: none;
position: absolute;
border: 1px solid #333;
border-radius: 2px;
padding-left: 3px;
margin-left: 300px;
left: 10px;
color: #000000;
}

Essentially you'll want to hide/show a set of absolutely positioned elements when certain things are clicked (or hovered)
function toggleTips () {
$(".tooltip").each(function() {
$(this).toggleClass("hidden")
})
}
$("#toggle-tips").on("click", function() {
toggleTips();
})
body {
font-family: Sans-serif
}
table {
border-collapse: collapse;
}
thead {
background: lightgray;
}
table, th, td {
border: 1px solid gray;
}
th, td {
position: relative;
padding: 10px
}
.tooltip {
box-shadow: 3px 3px 10px 0 rgba(0,0,0,.5);
padding: 10px;
position: absolute;
background: white;
white-space: nowrap;
font-weight: normal;
z-index: 2;
}
.hidden {
display: none;
}
button {
margin-top: 10px;
background: lightgray;
padding: 10px;
border: 0;
border-radius: 10px;
}
button:hover {
background: gray;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
<th>First Name <span class="tooltip hidden">User's first name</span></th>
<th>Last Name</th>
<th>Phone #</th>
</thead>
<tbody>
<td>Jane</td>
<td>Doe</td>
<td>0123456789<span class="tooltip hidden">User's phone number</span></td>
</tbody>
</table>
<button id="toggle-tips">Toggle Tips</button>

Want like this...
$(function(){
$(".info").click(function(){
var left = $("img",this).offset().left + ($("img",this).width()/2) - ($(".tip", this).width()/2);
$(".tip", this).toggle().css({"left":left});
});
});
.info .tip{
display: none;
position: absolute;
border: 1px solid #333;
border-radius: 2px;
padding: 3px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="info"><img src="http://blog.flattr.net/wp-content/uploads/2011/09/stackoverflow.png" />
<div class="tip">tool tip text</div>
</div>
Source - http://jsfiddle.net/NPXaf/

Multiple dropmenu buttons - Open only clicked button

I found good split dropmenu button script.
Created multiple buttons, and problem is if I click one button then all dropmenus of other buttons open...
So what I want to accomplish is only to open dropmenu that i've clicked not all menus (10post per page so i have 10buttons) that are on page.
Guess I need some id recognition code in my .js.
my script:
$(function() {
var splitBtn = $(".x-split-button");
$("button.x-button-drop").on("click", function() {
if (!splitBtn.hasClass("open"))
splitBtn.addClass("open");
});
$(".x-split-button").click(function(event) {
event.stopPropagation();
});
$("html").on("click", function() {
if (splitBtn.hasClass("open"))
splitBtn.removeClass("open");
});
});
.x-split-button {
position: relative;
display: inline-block;
text-align: left;
margin-top: 20px;
}
.x-button {
position: relative;
margin: 0;
height: 30px;
float: left;
outline: none;
font-weight: 600;
line-height: 27px;
background: #F2F2F2;
border: 1px solid #E0E0E0;
box-shadow: 1px 1px 2px #E0E0E0;
}
.x-button:hover {
cursor: pointer;
background: #E0E0E0;
}
.x-button:active {
background: #D3D3D3;
}
.x-button.x-button-drop {
border-left: 0;
height: 30px;
}
.open > .x-button-drop-menu {
display: block;
}
.x-button-drop-menu {
position: absolute;
top: 27px;
right: 0;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
font-size: 14px;
list-style: none;
background-color: #F2F2F2;
color: #000000;
background-clip: padding-box;
border: 1px solid #E0E0E0;
box-shadow: 1px 1px 2px #E0E0E0;
}
.x-button-drop-menu li a {
display: block;
padding: 3px 20px;
clear: both;
font-family: arial;
color: #000000;
text-decoration: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<center><font color="green">1st forum post....text goes here....</font><br/>
<span class="x-split-button">
<button class="x-button x-button-main">Admin Options</button>
<button class="x-button x-button-drop">▼</button>
<ul class="x-button-drop-menu">
<li>
Edit
</li>
<li>
Delete
</li>
<li>
Move
</li>
</ul>
</span>
<br/><br/><br/><br/><br/><font color="green">2nd forum post....text goes here....</font><br/>
<span class="x-split-button">
<button class="x-button x-button-main">Admin Options</button>
<button class="x-button x-button-drop">▼</button>
<ul class="x-button-drop-menu">
<li>
Edit
</li>
<li>
Delete
</li>
<li>
Move
</li>
</ul>
</span>
</center>

jQuery $(this) is concerned about the element concerned in this function (Onclick). We use closest() to reach The parent container (.x-split-button) which is the targeted element in this case.
We can also use $(this).parent(".x-split-button").addClass("open");
In other situations, you could use $(this).parents(); when the container is not a direct parent.
$(function() {
var splitBtn = $(".x-split-button");
$("button.x-button-drop").on("click", function() {
if (!($(this).closest(".x-split-button").hasClass("open"))){
splitBtn.removeClass("open");
$(this).closest(".x-split-button").addClass("open");
}else{
$(this).closest(".x-split-button").removeClass("open");
}});
$(".x-split-button").click(function(event) {
event.stopPropagation();
});
$("body").on("click", function() {
if (splitBtn.hasClass("open"))
splitBtn.removeClass("open");
});
});
.x-split-button {
position: relative;
display: inline-block;
text-align: left;
margin-top: 20px;
}
.x-button {
position: relative;
margin: 0;
height: 30px;
float: left;
outline: none;
font-weight: 600;
line-height: 27px;
background: #F2F2F2;
border: 1px solid #E0E0E0;
box-shadow: 1px 1px 2px #E0E0E0;
}
.x-button:hover {
cursor: pointer;
background: #E0E0E0;
}
.x-button:active {
background: #D3D3D3;
}
.x-button.x-button-drop {
border-left: 0;
height: 30px;
}
.open > .x-button-drop-menu {
display: block;
}
.x-button-drop-menu {
position: absolute;
top: 27px;
right: 0;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
font-size: 14px;
list-style: none;
background-color: #F2F2F2;
color: #000000;
background-clip: padding-box;
border: 1px solid #E0E0E0;
box-shadow: 1px 1px 2px #E0E0E0;
}
.x-button-drop-menu li a {
display: block;
padding: 3px 20px;
clear: both;
font-family: arial;
color: #000000;
text-decoration: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<center><font color="green">1st forum post....text goes here....</font><br/>
<span class="x-split-button">
<button class="x-button x-button-main">Admin Options</button>
<button class="x-button x-button-drop">▼</button>
<ul class="x-button-drop-menu">
<li>
Edit
</li>
<li>
Delete
</li>
<li>
Move
</li>
</ul>
</span>
<br/><br/><br/><br/><br/><font color="green">2nd forum post....text goes here....</font><br/>
<span class="x-split-button">
<button class="x-button x-button-main">Admin Options</button>
<button class="x-button x-button-drop">▼</button>
<ul class="x-button-drop-menu">
<li>
Edit
</li>
<li>
Delete
</li>
<li>
Move
</li>
</ul>
</span>
</center>

How to set inner element border upon the outer one?

Here is my code:
.compare_header_box{
padding: 35px 30px;
direction: rtl;
}
.compare_header_box_title{
font-size: 30px;
width: 100px;
float: right;
margin-right: 5px;
margin-top: 4px;
}
.compare_header_box_items{
width: 100%;
border-bottom: 1px solid #ccc;
direction: ltr;
}
.compare_header_box_items a{
display: inline-block;
font-size: 16px;
padding: 15px 40px;
}
.compare_header_box_items a:hover{
text-decoration: none;
background-color: #f1f1f1;
color: black;
}
.compare_header_box_items .active{
border-top: 3px solid orange;
border-right: 1px solid #ccc;
border-left: 1px solid #ccc;
border-bottom: 1px solid white;
}
<div class="compare_header_box">
<span class="compare_header_box_title active">List</span>
<div class="compare_header_box_items">
gp
in
tw
<a class="active" href="./fb">fb</a>
</div>
</div>
As you see border-bottom: 1px solid white; doesn't seem to appear. I want to set it exactly upon the border-bottom: 1px solid #ccc;. How can I do that?

Make use of pseudo elements,
.compare_header_box_items .active {
position: relative;
border-top: 3px solid orange;
border-right: 1px solid #ccc;
border-left: 1px solid #ccc;
}
.compare_header_box_items .active:after {
content: '';
position: absolute;
width: 100%;
height: 1px;
background-color: #fff;
bottom: -1px;
left: 0;
}
I hope this is what you require
.compare_header_box {
padding: 35px 30px;
direction: rtl;
}
.compare_header_box_title {
font-size: 30px;
width: 100px;
float: right;
margin-right: 5px;
margin-top: 4px;
}
.compare_header_box_items {
width: 100%;
border-bottom: 1px solid #ccc;
direction: ltr;
}
.compare_header_box_items a {
display: inline-block;
font-size: 16px;
padding: 15px 40px;
}
.compare_header_box_items a:hover {
text-decoration: none;
background-color: #f1f1f1;
color: black;
}
.compare_header_box_items .active {
position: relative;
border-top: 3px solid orange;
border-right: 1px solid #ccc;
border-left: 1px solid #ccc;
}
.compare_header_box_items .active:after {
content: '';
position: absolute;
width: 100%;
height: 1px;
background-color: #fff;
bottom: -1px;
left: 0;
}
<div class="compare_header_box">
<span class="compare_header_box_title active">List</span>
<div class="compare_header_box_items">
gp
in
tw
<a class="active" href="./fb">fb</a>
</div>
</div>

Add margin-bottom: -1px to a tags in .compare_header_box_items div
Thus code will become:
.compare_header_box_items a {
display: inline-block;
font-size: 16px;
padding: 15px 40px;
margin: 0 0 -1px; /* add this line */
}
The reason your code not working is, main div border begin when inner links area ends which includes their borders too. Thus adding a 1 pixel negative margin will make them two borders overlap.

As a hot fix, just add: margin-bottom: -1px;
check below code snippet.
.compare_header_box{
padding: 35px 30px;
direction: rtl;
}
.compare_header_box_title{
font-size: 30px;
width: 100px;
float: right;
margin-right: 5px;
margin-top: 4px;
}
.compare_header_box_items{
width: 100%;
border-bottom: 1px solid #ccc;
direction: ltr;
}
.compare_header_box_items a{
display: inline-block;
font-size: 16px;
padding: 15px 40px;
}
.compare_header_box_items a:hover{
text-decoration: none;
background-color: #f1f1f1;
color: black;
}
.compare_header_box_items .active{
border-top: 3px solid orange;
border-right: 1px solid #ccc;
border-left: 1px solid #ccc;
border-bottom: 1px solid #fff;
margin-bottom: -1px;
}
<div class="compare_header_box">
<span class="compare_header_box_title active">List</span>
<div class="compare_header_box_items">
gp
in
tw
<a class="active" href="./fb">fb</a>
</div>
</div>

Use box-shadow instead of border, which allows you to avoid shifting the positions of elements:
box-shadow: 0 1px white;
(Note that I have substituted red for emphasis in the snippet below.)
.compare_header_box {
padding: 35px 30px;
direction: rtl;
}
.compare_header_box_title {
font-size: 30px;
width: 100px;
float: right;
margin-right: 5px;
margin-top: 4px;
}
.compare_header_box_items {
width: 100%;
border-bottom: 1px solid #ccc;
direction: ltr;
}
.compare_header_box_items a {
display: inline-block;
font-size: 16px;
padding: 15px 40px;
}
.compare_header_box_items a:hover {
text-decoration: none;
background-color: #f1f1f1;
color: black;
}
.compare_header_box_items .active {
border-top: 3px solid orange;
border-right: 1px solid #ccc;
border-left: 1px solid #ccc;
box-shadow: 0 1px red; /* white; */
}
<div class="compare_header_box">
<span class="compare_header_box_title active">List</span>
<div class="compare_header_box_items">
gp
in
tw
<a class="active" href="./fb">fb</a>
</div>
</div>

Hyy
Only this things is possible and your problem will solve...
.compare_header_box_items .active {
position: relative;
bottom: -1px;
}
Add this css and your problem will solve.
Thanks :)
Appreciate my answer.

The white border seems to appear bro. But the background is also white. Change the background and you will see the white background or as part of your code you can just hover over it and check the border. To the result part, there are so many answers above. This answer is only to say that the border is visible and element next to it appears.
Even SOF uses padding to fix it. If you remove, you will see border-bottom #CCC
background.

Keep element with hover effect visible only if tooltip is being displayed

I have an anchor element which is hidden and turns visible only by hovering over it. When the user clicks the anchor a custom tool-tip appears with the native link of the anchor. The tool-tip is being displayed until the user clicks the "x" button or somewhere outside it. I want to keep the anchor(with the hover effect) visible as long as the tool-tip is being displayed and when the tool-tip is not displayed the anchor should again hidden and visible only by hovering.
$('a.anchor').click(function(event) {
event.stopPropagation();
var thistool = $(this).parent().find('div.tooltip');
$('div.tooltip').not(thistool).hide();
thistool.toggle();
thistool.find('input').select();
});
$('.icon-decline').on('click', function() {
$(this).parent().hide();
});
$('div.tooltip').on('click', function(event) {
event.stopPropagation();
});
$(document).on('click', function() {
$('div.tooltip').hide();
});
span {
position: relative;
}
.tooltip {
display: none;
position: absolute;
font-size: 15px;
line-height: 20px;
font-weight: normal;
color: #7b7a79;
width: auto;
white-space: nowrap;
text-align: center;
box-sizing: border-box;
border-radius: 6px;
background: #fff;
z-index: 1;
right: -208px;
bottom: -11%;
border: 2px solid #7b7a79;
}
.tooltip-arrow {
top: 50%;
left: -9px;
margin-top: -5px;
border-top: 5px solid transparent;
border-right: 7px solid #7b7a79;
border-bottom: 5px solid transparent;
}
.tooltip-arrow {
position: absolute;
width: 0;
height: 0;
}
.tooltip-inner {
max-width: 200px;
padding: 10px;
color: #fff;
text-align: center;
text-decoration: none;
background-color: #eff4f9;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
input {
border-left-color: transparent;
border-right-color: transparent;
border-top-color: transparent;
border-bottom-color: transparent;
background-color: #eff4f9;
}
.icon-decline {
display: block;
float: right;
position: relative;
top: -4px;
right: 2px;
height: 20px;
cursor: pointer;
}
.anchor i {
visibility: hidden;
}
h1:hover .anchor i {
visibility: visible;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 id="intro">
<span>Intro
<div class="tooltip" style="display: none;">
<i class="icon-decline">X</i>
<div class="tooltip-arrow"></div>
<div class="tooltip-inner">
<input type="text" id="theInput" onfocus="this.select();" readonly="readonly" dir="rtl" value="http://local/someurl/somemore/#intro">
</div>
</div>
<a href="#intro" class="anchor">
<i class="icon-chain-link">#</i>
</a>
</span>
</h1>

Please see example, seems to do what you need?
Basically i created a css class which i add and remove when the tooltip is shown. Also changed visibility to display.
Relative parts
CSS
.icon-chain-link {
display: none;
}
h1:hover .icon-chain-link {
display: inherit;
}
.icon-show {
display: inherit;
}
Javascript these lines
$(this).find("i").addClass("icon-show");
$(".icon-chain-link").removeClass("icon-show");
$('a.anchor').click(function(event) {
event.stopPropagation();
$(this).find("i").addClass("icon-show");
var thistool = $(this).parent().find('div.tooltip');
$('div.tooltip').not(thistool).hide();
thistool.toggle();
thistool.find('input').select();
});
$('.icon-decline').on('click', function() {
$(this).parent().hide();
$(".icon-chain-link").removeClass("icon-show");
});
$('div.tooltip').on('click', function(event) {
event.stopPropagation();
});
$(document).on('click', function() {
$('div.tooltip').hide();
$(".icon-chain-link").removeClass("icon-show");
});
span {
position: relative;
}
.tooltip {
display: none;
position: absolute;
font-size: 15px;
line-height: 20px;
font-weight: normal;
color: #7b7a79;
width: auto;
white-space: nowrap;
text-align: center;
box-sizing: border-box;
border-radius: 6px;
background: #fff;
z-index: 1;
right: -208px;
bottom: -11%;
border: 2px solid #7b7a79;
}
.tooltip-arrow {
top: 50%;
left: -9px;
margin-top: -5px;
border-top: 5px solid transparent;
border-right: 7px solid #7b7a79;
border-bottom: 5px solid transparent;
}
.tooltip-arrow {
position: absolute;
width: 0;
height: 0;
}
.tooltip-inner {
max-width: 200px;
padding: 10px;
color: #fff;
text-align: center;
text-decoration: none;
background-color: #eff4f9;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
input {
border-left-color: transparent;
border-right-color: transparent;
border-top-color: transparent;
border-bottom-color: transparent;
background-color: #eff4f9;
}
.icon-decline {
display: block;
float: right;
position: relative;
top: -4px;
right: 2px;
height: 20px;
cursor: pointer;
}
.icon-chain-link {
display: none;
}
h1:hover .icon-chain-link {
display: inherit;
}
.icon-show {
display: inherit;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 id="intro">
<span>Intro
<div class="tooltip" style="display: none;">
<i class="icon-decline">X</i>
<div class="tooltip-arrow"></div>
<div class="tooltip-inner">
<input type="text" id="theInput" onfocus="this.select();" readonly="readonly" dir="rtl" value="http://local/someurl/somemore/#intro">
</div>
</div>
<a href="#intro" class="anchor">
<i class="icon-chain-link">#</i>
</a>
</span>
</h1>

This could be one solution, add a class to the parent element when the tooltip is visible, i hope this can help you :)
$('a.anchor').click(function(event) {
event.stopPropagation();
var thistool = $(this).parent().find('div.tooltip');
$(this).closest('h1').toggleClass('tooltip-open');
thistool.find('input').select();
});
$('.icon-decline').on('click', function() {
$(this).closest('h1').removeClass('tooltip-open');
});
$('div.tooltip').on('click', function(event) {
event.stopPropagation();
});
$(document).on('click', function() {
$('h1').removeClass('tooltip-open');
});
span {
position: relative;
}
.tooltip {
display: none;
position: absolute;
font-size: 15px;
line-height: 20px;
font-weight: normal;
color: #7b7a79;
width: auto;
white-space: nowrap;
text-align: center;
box-sizing: border-box;
border-radius: 6px;
background: #fff;
z-index: 1;
right: -208px;
bottom: -11%;
border: 2px solid #7b7a79;
}
.tooltip-arrow {
top: 50%;
left: -9px;
margin-top: -5px;
border-top: 5px solid transparent;
border-right: 7px solid #7b7a79;
border-bottom: 5px solid transparent;
}
.tooltip-arrow {
position: absolute;
width: 0;
height: 0;
}
.tooltip-inner {
max-width: 200px;
padding: 10px;
color: #fff;
text-align: center;
text-decoration: none;
background-color: #eff4f9;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.tooltip-open .tooltip{
display: block;
}
input {
border-left-color: transparent;
border-right-color: transparent;
border-top-color: transparent;
border-bottom-color: transparent;
background-color: #eff4f9;
}
.icon-decline {
display: block;
float: right;
position: relative;
top: -4px;
right: 2px;
height: 20px;
cursor: pointer;
}
.anchor i {
visibility: hidden;
}
h1:hover .anchor i, .tooltip-open .anchor i {
visibility: visible;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 id="intro">
<span>Intro
<div class="tooltip">
<i class="icon-decline">X</i>
<div class="tooltip-arrow"></div>
<div class="tooltip-inner">
<input type="text" id="theInput" onfocus="this.select();" readonly="readonly" dir="rtl" value="http://local/someurl/somemore/#intro">
</div>
</div>
<a href="#intro" class="anchor">
<i class="icon-chain-link">#</i>
</a>
</span>
</h1>