Floating text at the end of the text is disabled when it is at the end of the screen.
<div style="width:0px">
<a data-tooltip="Two different email addresses are required due to junk mail filters which may not allow our emails through to all servers. If you receive the email on both your work & home accounts please click on the link from your preferred email ID to validate your account to ensure only that email address will be used for future correspondence."><img src="images/info.png" class="info-img"/></a>
</div>
CSS
/* Add this attribute to the element that needs a tooltip */
[data-tooltip] {
position: relative;
z-index: 2;
cursor: pointer;
}
/* Hide the tooltip content by default */
[data-tooltip]:before, [data-tooltip]:after {
visibility: hidden;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
pointer-events: none;
}
/* Position tooltip above the element */
[data-tooltip]:before {
position: absolute;
bottom: 150%;
left: 50%;
margin-bottom: 5px;
margin-left: -9em;
padding: 7px;
width: 160px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background-color: #000;
background-color: hsla(0, 0%, 20%, 0.9);
color: #fff;
content: attr(data-tooltip);
text-align: center;
font-size: 14px;
line-height: 1.2;
}
/* Triangle hack to make tooltip look like a speech bubble */
[data-tooltip]:after {
position: absolute;
bottom: 150%;
left: 50%;
margin-left: -5px;
width: 0;
border-top: 5px solid #000;
border-top: 5px solid hsla(0, 0%, 20%, 0.9);
border-right: 5px solid transparent;
border-left: 5px solid transparent;
content:" ";
font-size: 0;
line-height: 0;
}
/* Show tooltip content on hover */
[data-tooltip]:hover:before, [data-tooltip]:hover:after {
visibility: visible;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
}
the tool tip is displayed when clicked on a mobile device. The problem is when it reaches the end of the screen, the tip of the tool is sheared off. When I click on the icon when it is at the top of the screen, the tool tip is displayed at the top of the icon instead of at the bottom.
+3
source to share
1 answer
I've tried editing the code. Also, if you want a specific position in mobile view to be able to use
@media only screen and (max-width: 500px){
[data-tooltip]:before {//left:"some value";right:"some value";}[data-tooltip]:after{
bottom: 227%;
left: 50%;
margin-left: 26px;}
}
/* Add this attribute to the element that needs a tooltip */
[data-tooltip] {
position: relative;
z-index: 2;
cursor: pointer;
}
/* Hide the tooltip content by default */
[data-tooltip]:before, [data-tooltip]:after {
visibility: hidden;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
pointer-events: none;
}
/* Position tooltip above the element */
[data-tooltip]:before {
position: absolute;
bottom: 150%;
left: 50%;
margin-bottom: 5px;
margin-left: -9em;
padding: 7px;
width: 160px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background-color: #000;
background-color: hsla(0, 0%, 20%, 0.9);
color: #fff;
content: attr(data-tooltip);
text-align: center;
font-size: 14px;
line-height: 1.2;
}
/* Triangle hack to make tooltip look like a speech bubble */
[data-tooltip]:after {
position: absolute;
bottom: 150%;
left: 50%;
margin-left: -5px;
width: 0;
border-top: 5px solid #000;
border-top: 5px solid hsla(0, 0%, 20%, 0.9);
border-right: 5px solid transparent;
border-left: 5px solid transparent;
content:" ";
font-size: 0;
line-height: 0;
}
/* Show tooltip content on hover */
[data-tooltip]:hover:before, [data-tooltip]:hover:after {
visibility: visible;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
}
/*edit*/
@media only screen and (max-width: 500px){
[data-tooltip]:before{
position: absolute;
bottom: 150%;
left: 50%;
margin-bottom: -200px;
margin-left: 3em;
padding: 7px;}
[data-tooltip]:after{
position: absolute;
bottom: 227%;
left: 50%;
margin-left: 26px;}
}
<div style="width:0px">
<a data-tooltip="Two different email addresses are required due to junk mail filters which may not allow our emails through to all servers. If you receive the email on both your work & home accounts please click on the link from your preferred email ID to validate your account to ensure only that email address will be used for future correspondence."><img src="https://dummyimage.com/50/red/000000.png&text=i" class="info-img"/></a>
</div>
0
source to share