i have created following Code, please check it out on
.tooltip1 {
z-index: 1;
position: relative;
}
.tooltip1 .tooltiptext {
visibility: hidden;
width: 300px;
min-height:172px;
opacity: 1;
font-size: 14px;
border: 1px solid grey;
background-color: lightblue;
background-image:url(images/test.jpg);
color: black;
text-align: left;
border-radius: 2px;
padding: 15px 10px 15px 10px;
margin-top: -6px;
margin-left: 10px;
position: absolute;
line-height:20px;
z-index: 100;
-moz-border-radius: 5px;
/* -webkit-border-radius: 5px; */
box-shadow: 5px 5px 5px grey;
}
.tooltip1 .tooltiptext:before {
content: '';
/* visibility: hidden;*/
display: block;
width: 0;
height: 0;
position: absolute;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-right: 8px solid #133a6f;
left: -8px;
top: 7px;
}
.tooltip1:hover .tooltiptext {
/* visibility: visible;*/
visibility: visible;
}<a href="#" target="_blank" class="catg_title tooltip1">2016<span class="tooltiptext">The dsfsf dsf dsfsf sdf sdfds sd fsdfsdsdfff se tr kksjh sjdf jhsdf kjhdjh usehr jshdfjhs d</span></a></br>
<a href="#" target="_blank" class="catg_title tooltip1">2017 dfs ds fsf s <span class="tooltiptext">The The dsfsf dsf dsfsf sdf sdfds sd fsdfsdsdfff se tr kksjh sjdf jhsdf kjhdjh usehr jshdfjhs d</span></a></br>
<a href="#" target="_blank" class="catg_title tooltip1">2018 sdf <span class="tooltiptext">The dsfsf dsf dsfsf sdf sdfds sd fsdfsdsdfff se tr kksjh sjdf jhsdf kjhdjh usehr jshdfjhs d</span></a></br>
<a href="#" target="_blank" class="catg_title tooltip1">2019sdfsf sf df ds f fsdf <span class="tooltiptext">The dsfsf dsf dsfsf sdf sdfds sd fsdfsdsdfff se tr kksjh sjdf jhsdf kjhdjh usehr jshdfjhs d</span></a></br>
<a href="#" target="_blank" class="catg_title tooltip1">2020 dfs fsdf sdf sf sd<span class="tooltiptext">The dsfsf dsf dsfsf sdf sdfds sd fsdfsdsdfff se tr kksjh sjdf jhsdf kjhdjh usehr jshdfjhs d</span></a></br>https://codepen.io/mevil311/pen/NOKjzo
I'm trying to achieve Wikipedia like popUp in paragraphs. But the Anchor Text is visible from Pop up Tootip (span Text). please help
Simply remove the z-index: 1; rule from your .tooltip1:
.tooltip1 {
/* z-index: 1; ← removed */
position: relative;
}
.tooltip1 .tooltiptext {
visibility: hidden;
width: 300px;
min-height: 172px;
opacity: 1;
font-size: 14px;
border: 1px solid grey;
background-color: lightblue;
background-image: url(images/test.jpg);
color: black;
text-align: left;
border-radius: 2px;
padding: 15px 10px 15px 10px;
margin-top: -6px;
margin-left: 10px;
position: absolute;
line-height: 20px;
z-index: 100;
-moz-border-radius: 5px;
/* -webkit-border-radius: 5px; */
box-shadow: 5px 5px 5px grey;
}
.tooltip1 .tooltiptext:before {
content: '';
/* visibility: hidden;*/
display: block;
width: 0;
height: 0;
position: absolute;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-right: 8px solid #133a6f;
left: -8px;
top: 7px;
}
.tooltip1:hover .tooltiptext {
/* visibility: visible;*/
visibility: visible;
}<a href="#" target="_blank" class="catg_title tooltip1">2016<span class="tooltiptext">The dsfsf dsf dsfsf sdf sdfds sd fsdfsdsdfff se tr kksjh sjdf jhsdf kjhdjh usehr jshdfjhs d</span></a></br>
<a href="#" target="_blank" class="catg_title tooltip1">2017 dfs ds fsf s <span class="tooltiptext">The The dsfsf dsf dsfsf sdf sdfds sd fsdfsdsdfff se tr kksjh sjdf jhsdf kjhdjh usehr jshdfjhs d</span></a></br>
<a href="#" target="_blank" class="catg_title tooltip1">2018 sdf <span class="tooltiptext">The dsfsf dsf dsfsf sdf sdfds sd fsdfsdsdfff se tr kksjh sjdf jhsdf kjhdjh usehr jshdfjhs d</span></a></br>
<a href="#" target="_blank" class="catg_title tooltip1">2019sdfsf sf df ds f fsdf <span class="tooltiptext">The dsfsf dsf dsfsf sdf sdfds sd fsdfsdsdfff se tr kksjh sjdf jhsdf kjhdjh usehr jshdfjhs d</span></a></br>
<a href="#" target="_blank" class="catg_title tooltip1">2020 dfs fsdf sdf sf sd<span class="tooltiptext">The dsfsf dsf dsfsf sdf sdfds sd fsdfsdsdfff se tr kksjh sjdf jhsdf kjhdjh usehr jshdfjhs d</span></a></br>