Custom tooltip CSS issue with the header - javascript

I've created a tooltip using CSS but what I can't achieve is keeping the tooltip head into center. So if you notice it says £30.00 in the tooltip. If you write £300.00 or increase words in the tooltip the head of the tooltips doesn't stay in the center.
Can anyone help?
.tooltip-card {
display: inline-block;
position: relative;
border: 1px solid #777777;
background: #FFF;
text-decoration: none;
border-radius: 2px;
padding: 5px 10px;
margin-top: 50px;
margin-bottom: 40px;
}
.tooltip-card-text:before {
content: '';
display: block;
position: absolute;
left: 31%;
bottom: 100%;
width: 0;
height: 0;
border: 10px solid transparent;
border-bottom-color: black;
}
.tooltip-card-text:after {
content: '';
display: block;
position: absolute;
left: 32%;
bottom: 100%;
width: 0;
height: 0;
border: 9px solid transparent;
border-bottom-color: white;
}
.search-bolt-icon-map {
color: #02b875;
margin-right: 5px;
}
<div class="tooltip-card">
<div href="#" class="tooltip-card-text"><i class="fa fa-bolt search-bolt-icon-map"></i>£30.00</div>
</div>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css">

The problem is that 31% and 32% are specific, and rely on the current width of the element. Instead, center the triangle with left: 50; transform: translateX(-50%);:
.tooltip-card {
display: inline-block;
position: relative;
border: 1px solid #777777;
background: #FFF;
text-decoration: none;
border-radius: 2px;
padding: 5px 10px;
margin-top: 50px;
margin-bottom: 40px;
}
.tooltip-card-text:before {
content: '';
display: block;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 100%;
width: 0;
height: 0;
border: 10px solid transparent;
border-bottom-color: black;
}
.tooltip-card-text:after {
content: '';
display: block;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 100%;
width: 0;
height: 0;
border: 9px solid transparent;
border-bottom-color: white;
}
.search-bolt-icon-map {
color: #02b875;
margin-right: 5px;
}
<div class="tooltip-card">
<div href="#" class="tooltip-card-text">
<i class="fa fa-bolt search-bolt-icon-map"></i> £30000000.00
</div>
</div>
<div class="tooltip-card">
<div href="#" class="tooltip-card-text">
<i class="fa fa-bolt search-bolt-icon-map"></i> £3000.00
</div>
</div>
<div class="tooltip-card">
<div href="#" class="tooltip-card-text">
<i class="fa fa-bolt search-bolt-icon-map"></i> £30.00
</div>
</div>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css">

Related

Progress bar with steps styling

How to style my progress bar so it looks like the design? I tried to moved the text but they keep staying in the circle. Also not sure how to create the circle within another circle dot with css. It should be non clcikable. Here is the css and html files. Also not sure how to let active/finished steps be in a tick icon.
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>XXXXXX</title>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<div id="progress">
<div id="progress-bar"></div>
<ul id="progress-text">
<li class="step active">1</li>
<li class="step">2</li>
<li class="step">3</li>
<li class="step">4</li>
<li class="step">5</li>
</ul>
</div>
<button id="progress-prev" class="btn" disabled>Prev</button>
<button id="progress-next" class="btn">Next</button>
<script src="./bar script.js"></script>
</body>
</html>
--------------------- css file
#progress {
position: relative;
margin-bottom: 30px;
}
#progress-bar {
position: absolute;
background: #4584ff;
height: 5px;
width: 0%;
top: 50%;
left: 0;
}
#progress-text {
margin: 0;
padding: 0;
list-style: none;
display: flex;
justify-content: space-between;
}
#progress-text::before {
content: "";
background-color: lightgray;
position: absolute;
top: 50%;
left: 0;
height: 5px;
width: 100%;
z-index: -1;
}
#progress-text .step {
border: 3px solid lightgray;
border-radius: 100%;
width: 25px;
height: 25px;
line-height: 25px;
text-align: center;
background-color: #fff;
font-family: sans-serif;
font-size: 14px;
position: relative;
z-index: 1;
}
#progress-text .step.active {
border-color: #4584ff;
background-color: #4584ff;
color: #fff;
}
.btn {
background: lightgray;
border: none;
border-radius: 3px;
padding: 6px 12px;
}
Here is the reference picture
I hope that's what you meant
#progress {
position: relative;
margin-bottom: 30px;
}
#progress-bar {
position: absolute;
background: #4584ff;
height: 5px;
width: 0%;
top: 50%;
left: 0;
}
#progress-text {
margin: 0;
padding: 0;
list-style: none;
display: flex;
justify-content: space-between;
}
#progress-text::before {
content: "";
background-color: lightgray;
position: absolute;
top: 50%;
left: 0;
height: 5px;
width: 100%;
z-index: -1;
}
#progress-text .step {
border: 3px solid lightgray;
border-radius: 100%;
width: 25px;
height: 25px;
line-height: 25px;
text-align: center;
background-color: #fff;
font-family: sans-serif;
font-size: 14px;
position: relative;
z-index: 1;
}
#progress-text .step.active {
border-color: #4584ff;
background-color: #4584ff;
color: #4584ff;
}
.btn {
background: lightgray;
border: none;
border-radius: 3px;
padding: 6px 12px;
}
/* added css */
#progress-text .step {
display:flex;
justify-content:center;
}
#progress-text .step label{
margin-top:120%;
font-size:.7rem;
font-weight:bold;
font-color:inherit;
}
#progress-text .step.active::after {
content:"✓";
color:#fff;
z-index:2;
position:absolute;
top:2px;
left:8px;
font-size:12px;
font-weight:bold;
}
#progress-text .step.progress{
border-color:#4584ff;
}
#progress-text .step.progress::after{
content:"•";
transform:scale(3);
position:absolute;
left:10px;
top:1.5px;
color:#4584ff;
}
#progress-text .step.progress label{
color:#4584ff;
}
<div id="progress">
<div id="progress-bar"></div>
<ul id="progress-text">
<li class="step active">
<label>Review</label>
</li>
<li class="step active">
<label>Assignment</label>
</li>
<li class="step progress">
<label>Investigation</label>
</li>
<li class="step">
<label>Handling</label>
</li>
<li class="step">
<label>Resolution</label>
</li>
</ul>
</div>
<button id="progress-prev" class="btn" disabled>Prev</button>
<button id="progress-next" class="btn">Next</button>

How to change button effects?

const msgg = document.getElementById("msgg");
const iaup = document.getElementById("iaup");
const iado = document.getElementById("iado");
const msgc = document.getElementById("msgc");
const msgarea = document.getElementById("msgarea");
const nmsg = document.getElementById("nmsg")
function sMessages1() {
msgg.classList.toggle("messageBox2");
iaup.classList.toggle("vdn");
iado.classList.toggle("vib");
msgarea.classList.toggle("vib")
}
body {
background-color: rgba(0,0,0,0.5);
}
.messageBox {
border-radius: 10px;
position: fixed;
right: 5%;
bottom: 0px;
width: 250px;
height: 40px;
transition: 200ms;
}
.messageBox2 {
bottom: 100px;
border-radius: 10px;
position: fixed;
right: 5%;
width: 300px;
height: 40px;
}
.messageContainer {
border: 1px solid lightgray;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
background-color: white;
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
height: 100%;
cursor: pointer;
}
.messageText {
padding-left: 12px;
font-size: 16px;
}
.Icons {
display: flex;
position: relative;
padding-right: 12px;
}
.iconMessage {
display: flex;
align-items: center;
border-radius: 50%;
padding: 6px 7px;
margin-right: 20px;
cursor: pointer;
}
.iconMessage:hover {
color: darkorange;
background-color: rgba(255,165,0,0.1);
}
.iconMoreMessage {
display: flex;
align-items: center;
border-radius: 50%;
padding: 0px 7px;
}
.iconMoreMessage:hover {
color: darkorange;
background-color: rgba(255,165,0,0.1);
}
.messageArea {
display: none;
border-right: 1px solid lightgray;
border-bottom: 1px solid lightgray;
border-left: 1px solid lightgray;
width: 300px;
height: 100px;
background-color: white;
}
.vdn {
display: none !important;
}
.vib {
display: inline-block !important;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.0/css/all.min.css"/>
<div class="messageBox" id="msgg">
<div class="messageContainer" id="msgc" onclick="sMessages1()">
<div class="messageText">
Messages
</div>
<div class="Icons">
<div class="iconMessage" id="nmsg">
<i class="fa-solid fa-envelope" style="font-size: 13px;color: pink;"></i>
<i class="fa-solid fa-plus" style="font-size: 9px;font-weight: bolder;position: absolute;left: 18px;top: 0px;"></i>
</div>
<div class="iconMoreMessage">
<i class="fa-solid fa-angle-up" id="iaup" style="font-size: 13px;"></i>
<i class="fa-solid fa-angle-down" id="iado" style="font-size: 13px;display: none;"></i>
</div>
</div>
</div>
<div class="messageArea" id="msgarea">
</div>
</div>
I've tried to make a message box. For now the only thing i want to fix is the new message button/div/icon.
When i click new message button its opening as i wanted. After clicking that button message box must open, so that you can send message to someone. But after when i click new message button again message box is closing. But i do not want it to close. It must work as i said before like sending message to others.
You are looking for stopPropagation
nmsg.addEventListener('click', e => {
e.stopPropagation()
})
const msgg = document.getElementById("msgg");
const iaup = document.getElementById("iaup");
const iado = document.getElementById("iado");
const msgc = document.getElementById("msgc");
const msgarea = document.getElementById("msgarea");
const nmsg = document.getElementById("nmsg")
function sMessages1() {
msgg.classList.toggle("messageBox2");
iaup.classList.toggle("vdn");
iado.classList.toggle("vib");
msgarea.classList.toggle("vib")
}
nmsg.addEventListener('click', e => {
e.stopPropagation()
})
body {
background-color: rgba(0, 0, 0, 0.5);
}
.messageBox {
border-radius: 10px;
position: fixed;
right: 5%;
bottom: 0px;
width: 250px;
height: 40px;
transition: 200ms;
}
.messageBox2 {
bottom: 100px;
border-radius: 10px;
position: fixed;
right: 5%;
width: 300px;
height: 40px;
}
.messageContainer {
border: 1px solid lightgray;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
background-color: white;
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
height: 100%;
cursor: pointer;
}
.messageText {
padding-left: 12px;
font-size: 16px;
}
.Icons {
display: flex;
position: relative;
padding-right: 12px;
}
.iconMessage {
display: flex;
align-items: center;
border-radius: 50%;
padding: 6px 7px;
margin-right: 20px;
cursor: pointer;
}
.iconMessage:hover {
color: darkorange;
background-color: rgba(255, 165, 0, 0.1);
}
.iconMoreMessage {
display: flex;
align-items: center;
border-radius: 50%;
padding: 0px 7px;
}
.iconMoreMessage:hover {
color: darkorange;
background-color: rgba(255, 165, 0, 0.1);
}
.messageArea {
display: none;
border-right: 1px solid lightgray;
border-bottom: 1px solid lightgray;
border-left: 1px solid lightgray;
width: 300px;
height: 100px;
background-color: white;
}
.vdn {
display: none !important;
}
.vib {
display: inline-block !important;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.0/css/all.min.css" />
<div class="messageBox" id="msgg">
<div class="messageContainer" id="msgc" onclick="sMessages1()">
<div class="messageText">
Messages
</div>
<div class="Icons">
<div class="iconMessage" id="nmsg">
<i class="fa-solid fa-envelope" style="font-size: 13px;color: pink;"></i>
<i class="fa-solid fa-plus" style="font-size: 9px;font-weight: bolder;position: absolute;left: 18px;top: 0px;"></i>
</div>
<div class="iconMoreMessage">
<i class="fa-solid fa-angle-up" id="iaup" style="font-size: 13px;"></i>
<i class="fa-solid fa-angle-down" id="iado" style="font-size: 13px;display: none;"></i>
</div>
</div>
</div>
<div class="messageArea" id="msgarea">
</div>
</div>

Positioning button element on image using CSS

I am working with this UI design, where I created an avatar image and also an upload button. My challenge is positioning the upload button on the image as shown below
expectation
but this is what I came up with
document.querySelector('#btnOpenFileDialog').addEventListener('click', function() {
document.querySelector('#fileLoader').click();
});
.image-cropper {
display: inline-block;
border-radius: 50%;
border: 1px solid #f2f2f2;
overflow: hidden;
}
img {
max-width: 100%;
height: auto;
}
.edit-img-btn {
position: absolute;
color: white;
font-size: .5rem;
width: 22px;
height: 22px;
padding: 5px;
border: 0;
border-radius: 50%;
background: #4169E2;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.21);
}
.edit-img-btn i {
font-size: 13px;
}
<span class="image-cropper" style=" width: 150px; height: 150px;">
<img src="assets/images/avatar.jpg" alt="">
</span>
<input type="file" id="fileLoader" style="display: none;" />
<button class="edit-img-btn" id="btnOpenFileDialog"><i class="material-icons">edit</i></button>
If you place all of it inside of an inline block element with position: relative you can adjust the position to fit your needs. Below is an example.
document.querySelector('#btnOpenFileDialog').addEventListener('click', function() {
document.querySelector('#fileLoader').click();
});
/*wrapper with position: relative */
.image-wrapper {
position: relative;
}
.image-cropper {
display: inline-block;
border-radius: 50%;
border: 1px solid #f2f2f2;
overflow: hidden;
}
img {
max-width: 100%;
height: auto;
}
.edit-img-btn {
position: absolute;
bottom: 5px; /* 5px up from the bottom */
right: 35px; /* 35px in from the right */
color: white;
font-size: .5rem;
width: 22px;
height: 22px;
padding: 5px;
border: 0;
border-radius: 50%;
background: #4169E2;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.21);
}
.edit-img-btn i {
font-size: 13px;
}
<span class="image-wrapper">
<span class="image-cropper" style=" width: 150px; height: 150px;">
<img src="https://via.placeholder.com/150" alt="">
</span>
<button class="edit-img-btn" id="btnOpenFileDialog"><i class="material-icons">edit</i></button>
<input type="file" id="fileLoader" style="display: none;" />
</span>
Add css properties top: 134px; and left: 134px; to class .edit-img-btn
document.querySelector('#btnOpenFileDialog').addEventListener('click', function() {
document.querySelector('#fileLoader').click();
});
.image-cropper {
display: inline-block;
border-radius: 50%;
border: 1px solid #f2f2f2;
overflow: hidden;
}
img {
max-width: 100%;
height: auto;
}
.edit-img-btn {
position: absolute;
top: 134px;
left: 134px;
color: white;
font-size: .5rem;
width: 22px;
height: 22px;
padding: 5px;
border: 0;
border-radius: 50%;
background: #4169E2;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.21);
}
.edit-img-btn i {
font-size: 13px;
}
<span class="image-cropper" style=" width: 150px; height: 150px;">
<img src="assets/images/avatar.jpg" alt="">
</span>
<input type="file" id="fileLoader" style="display: none;" />
<button class="edit-img-btn" id="btnOpenFileDialog"><i class="material-icons">edit</i></button>

Change the content(icon) of a div when clicked

I created a list with divs inside and the one div contains a home icon using font awesome. I want the font icon to change to a picture icon when clicked and change back to the home icon when clicked again. Do I need Javascript for this?
ul{
list-style-type: none;
margin-top: 0;
}
li a{
text-decoration: none;
color: black;
font-size: 25px;
}
li{
width: 50px;
height: 50px;
display: inline-block;
}
#homecover{
width: 55px;
height: 55px;
margin-top: 150px;
left: 47.5%;
position: absolute;
}
#home{
position: absolute;
z-index: 2;
background-color: #F73933;
border-radius: 50%;
border: 2px solid #F73933 ;
box-shadow: 2px 2px 2px 0.1px #9D9494, 0px 0px 0px 1px white inset;
}
#home a{
padding-left: 0.5em;
position: absolute;
padding-top: 0.3em;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<ul>
<div id="homecover">
<li id="home">
<span class="fa fa-home"></span>
<li>
</div>
</ul>
You can use JavaScript, jQuery is recommended:
$('#home a').on('click', function(e){
$('#home span').toggleClass('fa-home fa-anchor');
};
I guess you know how to include jQuery, if not just paste this into your head section:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Let me know if that works or not!
You need to add jQuery for that:
$("#home a").click(function(){
$(this).parent().toggleClass("active");
})
ul{
list-style-type: none;
margin-top: 0;
}
li a{
text-decoration: none;
color: black;
font-size: 25px;
}
li{
width: 50px;
height: 50px;
display: inline-block;
}
#homecover{
width: 55px;
height: 55px;
margin-top: 150px;
left: 47.5%;
position: absolute;
}
#home{
position: absolute;
z-index: 2;
background-color: #F73933;
border-radius: 50%;
border: 2px solid #F73933 ;
box-shadow: 2px 2px 2px 0.1px #9D9494, 0px 0px 0px 1px white inset;
}
#home a{
padding-left: 0.5em;
position: absolute;
padding-top: 0.3em;
}
#home.active .fa-home:before{
content: "\f1b9";
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<ul>
<div id="homecover">
<li id="home">
<span class="fa fa-home"></span>
<li>
</div>
</ul>
You have to use Javascript to bind the click event, after you should toggle CSS class.
Try this solution without jQuery
let home = document.querySelector('#home');
home.addEventListener('click', (e) => {
let icon = document.querySelector('.fa');
icon.classList.toggle('fa-home');
icon.classList.toggle('fa-heart');
})
ul{
list-style-type: none;
margin-top: 0;
}
li a{
text-decoration: none;
color: black;
font-size: 25px;
}
li{
width: 50px;
height: 50px;
display: inline-block;
}
#homecover{
width: 55px;
height: 55px;
margin-top: 150px;
left: 47.5%;
position: absolute;
}
#home{
position: absolute;
z-index: 2;
background-color: #F73933;
border-radius: 50%;
border: 2px solid #F73933 ;
box-shadow: 2px 2px 2px 0.1px #9D9494, 0px 0px 0px 1px white inset;
}
#home a{
padding-left: 0.5em;
position: absolute;
padding-top: 0.3em;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<ul>
<div id="homecover">
<li id="home">
<span class="fa fa-home"></span>
<li>
</div>
</ul>
When user driven events are involved, you'll have to use javascript. One way to do it is, you have two classes and you toggle them to show different icons.
var link = document.querySelector('#home a');
link.addEventListener('click', function(e){
//Prevent default action of a link, which navigates to href prop
e.preventDefault();
var icon = this.querySelector('span');
icon.classList.toggle('fa-home');
icon.classList.toggle('fa-image');
});
ul{
list-style-type: none;
margin-top: 0;
}
li a{
text-decoration: none;
color: #fff;
font-size: 25px;
}
li{
width: 50px;
height: 50px;
display: inline-block;
}
#homecover{
width: 55px;
height: 55px;
margin-top: 50px;
left: 47.5%;
position: absolute;
}
#home{
position: absolute;
z-index: 2;
background-color: #F73933;
border-radius: 50%;
border: 2px solid #F73933 ;
box-shadow: 2px 2px 2px 0.1px #9D9494, 0px 0px 0px 1px white inset;
}
#home a{
padding-left: 0.5em;
position: absolute;
padding-top: 0.3em;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<ul>
<div id="homecover">
<li id="home">
<span class="fa fa-home"></span>
<li>
</div>
</ul>
This is a non js solution
input + span:before {
height:45px;
content:"\f015"
}
input:checked + span:before {
content:"\f03e"
}
input{
display:none;
}
span.icon{
display: block;
vertical-align: middle;
text-align:center;
line-height: 45px;
}
ul{
list-style-type: none;
margin-top: 0;
}
li a{
text-decoration: none;
color: black;
font-size: 25px;
}
li{
width: 50px;
height: 50px;
display: inline-block;
}
#homecover{
cursor:pointer;
width: 55px;
height: 55px;
margin-top: 150px;
left: 47.5%;
position: absolute;
}
#home{
position: absolute;
z-index: 2;
background-color: #F73933;
border-radius: 50%;
border: 2px solid #F73933 ;
box-shadow: 2px 2px 2px 0.1px #9D9494, 0px 0px 0px 1px white inset;
}
#home a{
padding-left: 0.5em;
position: absolute;
padding-top: 0.3em;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<ul>
<label class="switch">
<div id="homecover">
<li id="home">
<input type="checkbox" ><span class="icon fa fa-lg"></span>
<li>
</div>
</label>
</ul>
$("span.fa").click(function(){
if($(this).attr("class") === "fa fa-home"){
$(this).attr("class", "fa-fa-{any-pic}");
} else {
$(this).attr("class", "fa fa-home");
}
});

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>

Categories