Utilizing the Tooltip custom style plugin presents a challenge for me...
My goal is to have my tooltip message appear like those seen on websites and in the image provided (for instance, incorporating an arrow into the tooltip):
- Sample link
- Sample link
Despite my attempts at applying various CSS rules, I am still unable to achieve the desired appearance... seeking assistance. Here is my CSS code:
body .ui-tooltip {
border-width:0;
}
.ui-tooltip,.arrow:after {
background:black;
border:0 solid white;
}
.ui-tooltip {
padding:10px;
color:white;
border-radius:5px;
font-family:Verdana, sans-serif;
font-size:12px;
text-transform:none;
}
.arrow {
width:70px;
height:16px;
position:absolute;
left:0!important;
margin-left:-25px;
top:55%;
}
.arrow.top {
top:-16px;
bottom:auto;
}
.arrow.left {
left:20%;
}
.arrow:after {
content:"";
position:absolute;
left:20px;
top:-20px;
width:25px;
height:25px;
box-shadow:6px 5px 9px -9px black;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-ms-transform:rotate(45deg);
-o-transform:rotate(45deg);
tranform:rotate(45deg);
}
.arrow.top:after {
bottom:-20px;
top:auto;
}
.ui-tooltip {
-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
filter:alpha(opacity=70);
opacity:0.7;
}
Upon implementing the aforementioned CSS code, my tooltip does not display as intended:
However, my objective is for it to resemble this, filling the entire space:
The issue lies with how my CSS handles the arrow design and does not match the example provided.
Edit:
The arrow problem has been resolved... yet achieving the desired display remains a challenge
.ui-tooltip {
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
filter: alpha(opacity=70);
opacity:0.7;
}
I suspect they do not utilize the above CSS... any suggestions on how their transparency works would be appreciated