I had created tooltip code for all directions popup but I want to popup only to top in mobile device please help me. I can't able to code @media screen code please anyone help me. Write a code for mobile devices where the only popup of (tooltip.top) work
.tooltip {
display:inline-block;
position:relative;
border-bottom:2px solid #ff5733;
text-align:left;
}
.tooltip .right {
min-width:200px;
top:50%;
left:100%;
margin-left:20px;
transform:translate(0, -50%);
padding:10px 20px;
color:#444444;
background-color:#EEEEEE;
font-weight:normal;
font-size:13px;
border-radius:8px;
position:absolute;
z-index:99999999;
box-sizing:border-box;
box-shadow:0 1px 8px rgba(0,0,0,0.5);
visibility:hidden; opacity:0; transition:opacity 0.8s;
}
.tooltip:hover .right {
visibility:visible; opacity:1;
}
.tooltip .right i {
position:absolute;
top:50%;
right:100%;
margin-top:-12px;
width:12px;
height:24px;
overflow:hidden;
}
.tooltip .right i::after {
content:'';
position:absolute;
width:12px;
height:12px;
left:0;
top:50%;
transform:translate(50%,-50%) rotate(-45deg);
background-color:#EEEEEE;
box-shadow:0 1px 8px rgba(0,0,0,0.5);
}
.tooltip .top {
min-width:200px;
top:-20px;
left:50%;
transform:translate(-50%, -100%);
padding:10px 20px;
color:#444444;
background-color:#EEEEEE;
font-weight:normal;
font-size:13px;
border-radius:8px;
position:absolute;
z-index:99999999;
box-sizing:border-box;
box-shadow:0 1px 8px rgba(0,0,0,0.5);
visibility:hidden; opacity:0; transition:opacity 0.8s;
}
.tooltip:hover .top {
visibility:visible; opacity:1;
}
.tooltip .top i {
position:absolute;
top:100%;
left:50%;
margin-left:-12px;
width:24px;
height:12px;
overflow:hidden;
}
.tooltip .top i::after {
content:'';
position:absolute;
width:12px;
height:12px;
left:50%;
transform:translate(-50%,-50%) rotate(45deg);
background-color:#EEEEEE;
box-shadow:0 1px 8px rgba(0,0,0,0.5);
}
.tooltip .bottom {
min-width:200px;
top:40px;
left:50%;
transform:translate(-50%, 0);
padding:10px 20px;
color:#444444;
background-color:#EEEEEE;
font-weight:normal;
font-size:13px;
border-radius:8px;
position:absolute;
z-index:99999999;
box-sizing:border-box;
box-shadow:0 1px 8px rgba(0,0,0,0.5);
visibility:hidden; opacity:0; transition:opacity 0.8s;
}
.tooltip:hover .bottom {
visibility:visible; opacity:1;
}
.tooltip .bottom i {
position:absolute;
bottom:100%;
left:50%;
margin-left:-12px;
width:24px;
height:12px;
overflow:hidden;
}
.tooltip .bottom i::after {
content:'';
position:absolute;
width:12px;
height:12px;
left:50%;
transform:translate(-50%,50%) rotate(45deg);
background-color:#EEEEEE;
box-shadow:0 1px 8px rgba(0,0,0,0.5);
}
.tooltip .left {
min-width:200px;
top:50%;
right:100%;
margin-right:20px;
transform:translate(0, -50%);
padding:10px 20px;
color:#444444;
background-color:#EEEEEE;
font-weight:normal;
font-size:13px;
border-radius:8px;
position:absolute;
z-index:99999999;
box-sizing:border-box;
border:3px solid #ff5733;box-shadow:0 1px 8px rgba(0,0,0,0.5);
visibility:hidden; opacity:0; transition:opacity 0.8s;
}
.tooltip:hover .left {
visibility:visible; opacity:1;
}
.tooltip .left i {
position:absolute;
top:50%;
left:100%;
margin-top:-12px;
width:12px;
height:24px;
overflow:hidden;
}
.tooltip .left i::after {
content:'';
position:absolute;
width:12px;
height:12px;
left:0;
top:50%;
transform:translate(-50%,-50%) rotate(-45deg);
background-color:#EEEEEE;
border:3px solid #ff5733;box-shadow:0 1px 8px rgba(0,0,0,0.5);
}<span class="btn btn-primary tooltip">Hover Me to Preview
<span class="bottom">
<h3>Lorem Ipsum</h3>
<p>Dolor sit amet, consectetur adipiscing elit.ofugugvufg
efuwgefwgcvurwef
wfierhfvierhvoerihvr</p>
<i></i>
</span>
</span>
<span class="btn btn-primary tooltip">Hover Me to Preview
<span class="top">
<h3>Lorem Ipsum</h3>
<p>Dolor sit amet, consectetur adipiscing elit.</p>
<i></i>
</span>
</span>
<span class="btn btn-primary tooltip">Hover Me to Preview
<span class="left">
<h3>Lorem Ipsum</h3>
<p>Dolor sit amet, consectetur adipiscing elit.</p>
<i></i>
</span>
</span>
<span class="btn btn-primary tooltip">Hover Me to Preview
<div class="right">
<h3>Lorem Ipsum</h3>
<p><img alt="The Bangle Sellers Poem's Workbook Solution" border="0" data-original-height="427" data-original-width="760" src="https://newsroom.ibm.com/image/security%2Bthumbnail%2B400x400.png"> consectetur
efrnvlkfnv</p>
<i></i>
</div>
</span>code for tooltips for all direction here is the code
You want to show it on top on mobile, so I have added some margin top to body so that we can have some space above and you can see your pop up, all you need to do is add a common class on every popup div or span and style it in same way like others, no different positions for each, same position of every pop up which will show it on top.
.tooltip {
display: inline-block;
position: relative;
border-bottom: 2px solid #ff5733;
text-align: left;
}
.tooltip .right {
min-width: 200px;
top: 50%;
left: 100%;
margin-left: 20px;
transform: translate(0, -50%);
padding: 10px 20px;
color: #444444;
background-color: #EEEEEE;
font-weight: normal;
font-size: 13px;
border-radius: 8px;
position: absolute;
z-index: 99999999;
box-sizing: border-box;
box-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
visibility: hidden;
opacity: 0;
transition: opacity 0.8s;
}
.tooltip:hover .right {
visibility: visible;
opacity: 1;
}
.tooltip .right i {
position: absolute;
top: 50%;
right: 100%;
margin-top: -12px;
width: 12px;
height: 24px;
overflow: hidden;
}
.tooltip .right i::after {
content: '
'
;
position: absolute;
width: 12px;
height: 12px;
left: 0;
top: 50%;
transform: translate(50%, -50%) rotate(-45deg);
background-color: #EEEEEE;
box-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}
.tooltip .top {
min-width: 200px;
top: -20px;
left: 50%;
transform: translate(-50%, -100%);
padding: 10px 20px;
color: #444444;
background-color: #EEEEEE;
font-weight: normal;
font-size: 13px;
border-radius: 8px;
position: absolute;
z-index: 99999999;
box-sizing: border-box;
box-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
visibility: hidden;
opacity: 0;
transition: opacity 0.8s;
}
.tooltip:hover .top {
visibility: visible;
opacity: 1;
}
.tooltip .top i {
position: absolute;
top: 100%;
left: 50%;
margin-left: -12px;
width: 24px;
height: 12px;
overflow: hidden;
}
.tooltip .top i::after {
content: '
'
;
position: absolute;
width: 12px;
height: 12px;
left: 50%;
transform: translate(-50%, -50%) rotate(45deg);
background-color: #EEEEEE;
box-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}
.tooltip .bottom {
min-width: 200px;
top: 40px;
left: 50%;
transform: translate(-50%, 0);
padding: 10px 20px;
color: #444444;
background-color: #EEEEEE;
font-weight: normal;
font-size: 13px;
border-radius: 8px;
position: absolute;
z-index: 99999999;
box-sizing: border-box;
box-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
visibility: hidden;
opacity: 0;
transition: opacity 0.8s;
}
.tooltip:hover .bottom {
visibility: visible;
opacity: 1;
}
.tooltip .bottom i {
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -12px;
width: 24px;
height: 12px;
overflow: hidden;
}
.tooltip .bottom i::after {
content: '
'
;
position: absolute;
width: 12px;
height: 12px;
left: 50%;
transform: translate(-50%, 50%) rotate(45deg);
background-color: #EEEEEE;
box-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}
.tooltip .left {
min-width: 200px;
top: 50%;
right: 100%;
margin-right: 20px;
transform: translate(0, -50%);
padding: 10px 20px;
color: #444444;
background-color: #EEEEEE;
font-weight: normal;
font-size: 13px;
border-radius: 8px;
position: absolute;
z-index: 99999999;
box-sizing: border-box;
border: 3px solid #ff5733;
box-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
visibility: hidden;
opacity: 0;
transition: opacity 0.8s;
}
.tooltip:hover .left {
visibility: visible;
opacity: 1;
}
.tooltip .left i {
position: absolute;
top: 50%;
left: 100%;
margin-top: -12px;
width: 12px;
height: 24px;
overflow: hidden;
}
.tooltip .left i::after {
content: '';
position: absolute;
width: 12px;
height: 12px;
left: 0;
top: 50%;
transform: translate(-50%, -50%) rotate(-45deg);
background-color: #EEEEEE;
border: 3px solid #ff5733;
box-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}
@media(max-width: 767px) {
body {
margin-top: 500px;
}
.tooltip>.toolTipWrap i:after {
content: '';
position: absolute;
width: 12px;
height: 12px;
left: 0;
top: 50%;
transform: translate(-50%, -50%) rotate(-45deg);
border: 3px solid #ff5733;
}
.tooltip>.toolTipWrap {
left: 50% !important;
top: auto !important;
transform: translateX(-50%);
right: auto !important;
bottom: 150% !important;
}
.tooltip>.toolTipWrap i {
position: absolute;
top: 100%;
left: 50%;
margin-top: 0px;
width: 12px;
height: 24px;
overflow: hidden;
transform: rotate(90deg) translateX(-50%);
background: transparent;
}
}<span class="btn btn-primary tooltip">Hover Me to Preview
<span class="bottom toolTipWrap">
<h3>Lorem Ipsum</h3>
<p>Dolor sit amet, consectetur adipiscing elit.ofugugvufg
efuwgefwgcvurwef
wfierhfvierhvoerihvr</p>
<i></i>
</span>
</span>
<span class="btn btn-primary tooltip">Hover Me to Preview
<span class="top toolTipWrap">
<h3>Lorem Ipsum</h3>
<p>Dolor sit amet, consectetur adipiscing elit.</p>
<i></i>
</span>
</span>
<span class="btn btn-primary tooltip">Hover Me to Preview
<span class="left toolTipWrap">
<h3>Lorem Ipsum</h3>
<p>Dolor sit amet, consectetur adipiscing elit.</p>
<i></i>
</span>
</span>
<span class="btn btn-primary tooltip">Hover Me to Preview
<div class="right toolTipWrap">
<h3>Lorem Ipsum</h3>
<p><img alt="The Bangle Sellers Poem's Workbook Solution" border="0" data-original-height="427" data-original-width="760" src="https://newsroom.ibm.com/image/security%2Bthumbnail%2B400x400.png"> consectetur
efrnvlkfnv</p>
<i></i>
</div>
</span>