0
Dear friends, good afternoon.
I have the link tooltip set to:
<a class="evento color-red" href="#"><span>informação</span>link</a>
You can leave it that way and keep the tooltip attributes:
<a class="evento" href="#"><span>informação</span>link</a>
This css I removed from the internet.
.evento,
.cancelar_presenca,
.musicaistooltip,
.cancelar_evento
{
position: relative !important;
display: inline-block !important;
text-decoration: none !important;
}
.evento span,
.cancelar_presenca span,
.musicaistooltip span,
.cancelar_evento span,
.css-tooltip-diagonal-right span,
.css-tooltip-diagonal-left span
{
min-width: 180px;
font-family: arial, sans-serif !important;
font-size: 13px !important;
line-height: normal !important;
text-align: left !important;
padding: 10px 10px 12px 10px !important;
visibility: hidden;
opacity: 0;
position: absolute;
z-index: 9999999 !important;
-webkit-transition-duration: 0.25s;
-moz-transition-duration: 0.25s;
-o-transition-duration: 0.25s;
-ms-transition-duration: 0.25s;
transition-duration: 0.25s;
-webkit-transition-timing-function: cubic-bezier(0.35,0,0.35,1);
-moz-transition-timing-function: cubic-bezier(0.35,0,0.35,1);
-o-transition-timing-function: cubic-bezier(0.35,0,0.35,1);
-ms-transition-timing-function: cubic-bezier(0.35,0,0.35,1);
transition-timing-function: cubic-bezier(0.35,0,0.35,1);
}
.evento span:before,
.cancelar_presenca span:before,
.musicaistooltip span:before,
.cancelar_evento span:before,
.css-tooltip-diagonal-right span:before,
.css-tooltip-diagonal-left span:before
{
content: "";
display: block;
width: 0px;
height: 0px;
position: absolute;
}
/* Tool tip Top */
.evento span
{
left: -10px;
bottom: 100%;
margin-bottom: 30px;
-webkit-transition-property: opacity, margin-bottom, visibility;
-moz-transition-property: opacity, margin-bottom, visibility;
-o-transition-property: opacity, margin-bottom, visibility;
-ms-transition-property: opacity, margin-bottom, visibility;
transition-property: opacity, margin-bottom, visibility;
}
.evento span:before
{
border-left: 8px solid transparent !important;
border-right: 8px solid transparent !important;
border-top: 8px solid #000;
border-bottom: 0 !important;
bottom: -8px;
left: 15px;
}
.evento:hover span
{
margin-bottom: 10px; /* End Position */
visibility: visible;
opacity: 1;
}
/* tooltip left
-------------------------------------------------------------- */
.cancelar_evento span
{
right: 100%;
top: -7px;
margin-right: 35px;
-webkit-transition-property: opacity, margin-right, visibility;
-moz-transition-property: opacity, margin-right, visibility;
-o-transition-property: opacity, margin-right, visibility;
-ms-transition-property: opacity, margin-right, visibility;
transition-property: opacity, margin-right, visibility;
}
.cancelar_evento span:before
{
border-left: 8px solid #000;
border-right: 0 !important;
border-top: 8px solid transparent !important;
border-bottom: 8px solid transparent !important;
top: 11px;
right: -8px;
}
.cancelar_evento:hover span
{
margin-right: 15px;
visibility: visible;
opacity: 1;
}
/* tooltip right
-------------------------------------------------------------- */
.musicaistooltip span
{
left: 100%;
top: -7px;
margin-left: 35px;
-webkit-transition-property: opacity, margin-left, visibility;
-moz-transition-property: opacity, margin-left, visibility;
-o-transition-property: opacity, margin-left, visibility;
-ms-transition-property: opacity, margin-left, visibility;
transition-property: opacity, margin-left, visibility;
}
.musicaistooltip span:before {
border-left: 0 !important;
border-right: 8px solid #000;
border-top: 8px solid transparent !important;
border-bottom: 8px solid transparent !important;
top: 11px;
left: -8px;
}
.musicaistooltip:hover span
{
margin-left: 15px;
visibility: visible;
opacity: 1;
}
/*tooltip bottom
-------------------------------------------------------------- */
.cancelar_presenca span
{
left: -10px;
top: 100%;
margin-top: 30px;
-webkit-transition-property: opacity, margin-top, visibility;
-moz-transition-property: opacity, margin-top, visibility;
-o-transition-property: opacity, margin-top, visibility;
-ms-transition-property: opacity, margin-top, visibility;
transition-property: opacity, margin-top, visibility;
}
.cancelar_presenca span:before
{
border-left: 8px solid transparent !important;
border-right: 8px solid transparent !important;
border-top: 0 !important;
border-bottom: 8px solid #000;
top: -8px;
left: 15px;
}
.cancelar_presenca:hover span
{
margin-top: 10px;
visibility: visible;
opacity: 1;
}
/* Tooltip Color */
.color-blue span
{
color: #ffffff !important;
background: rgba(0,0,0,0.75);
background: -moz-linear-gradient(top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.75) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.75)), color-stop(100%,rgba(0,0,0,0.75)));
background: -webkit-linear-gradient(top, rgba(0,0,0,0.75) 0%,rgba(0,0,0,0.75) 100%);
background: -o-linear-gradient(top, rgba(0,0,0,0.75) 0%,rgba(0,0,0,0.75) 100%);
background: -ms-linear-gradient(top, rgba(0,0,0,0.75) 0%,rgba(0,0,0,0.75) 100%);
background: linear-gradient(top, rgba(0,0,0,0.75) 0%,rgba(0,0,0,0.75) 100%);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
text-shadow: 0px 1px 0px rgba(0,0,0,0.4);
}
.color-blue span:before
{
border-color: rgba(0,0,0,0.75);
}
.color-blue span:after
{
content: "";
display: block;
border-top: 1px solid rgba(0,0,0,0.75);
position: absolute;
left: 0px;
top: 1px;
width: 100%;
height: 10px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.color-green span
{
color: #ffffff !important;
background: rgba(0,0,0,0.75);
background: -moz-linear-gradient(top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.75) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.75)), color-stop(100%,rgba(0,0,0,0.75)));
background: -webkit-linear-gradient(top, rgba(0,0,0,0.75) 0%,rgba(0,0,0,0.75) 100%);
background: -o-linear-gradient(top, rgba(0,0,0,0.75) 0%,rgba(0,0,0,0.75) 100%);
background: -ms-linear-gradient(top, rgba(0,0,0,0.75) 0%,rgba(0,0,0,0.75) 100%);
background: linear-gradient(top, rgba(0,0,0,0.75) 0%,rgba(0,0,0,0.75) 100%);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
text-shadow: 0px 1px 0px rgba(0,0,0,0.4);
}
.color-green span:before
{
border-color: rgba(0,0,0,0.75);
}
.color-green span:after
{
content: "";
display: block;
border-top: 1px solid rgba(0,0,0,0.75);
position: absolute;
left: 0px;
top: 1px;
width: 100%;
height: 10px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.color-green span strong
{
background: #246407;
border-bottom: 1px solid #205a06;
}
/*orange*/
.color-orange span
{
color: #ffffff !important;
background: rgba(0,0,0,0.75);
background: -moz-linear-gradient(top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.75) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.75)), color-stop(100%,rgba(0,0,0,0.75)));
background: -webkit-linear-gradient(top, rgba(0,0,0,0.75) 0%,rgba(0,0,0,0.75) 100%);
background: -o-linear-gradient(top, rgba(0,0,0,0.75) 0%,rgba(0,0,0,0.75) 100%);
background: -ms-linear-gradient(top, rgba(0,0,0,0.75) 0%,rgba(0,0,0,0.75) 100%);
background: linear-gradient(top, rgba(0,0,0,0.75) 0%,rgba(0,0,0,0.75) 100%);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
text-shadow: 0px 1px 0px rgba(0,0,0,0.4);
}
.color-orange span:before
{
border-color: rgba(0,0,0,0.75);
}
.color-orange span:after
{
content: "";
display: block;
border-top: 1px solid rgba(0,0,0,0.75);
position: absolute;
left: 0px;
top: 1px;
width: 100%;
height: 10px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.color-orange span strong
{
background: #bf461a;
border-bottom: 1px solid #ac3f17;
}
/*red*/
.color-red span
{
color: #ffffff !important;
background: rgba(0,0,0,0.75);
background: -moz-linear-gradient(top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.75) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.75)), color-stop(100%,rgba(0,0,0,0.75)));
background: -webkit-linear-gradient(top, rgba(0,0,0,0.75) 0%,rgba(0,0,0,0.75) 100%);
background: -o-linear-gradient(top, rgba(0,0,0,0.75) 0%,rgba(0,0,0,0.75) 100%);
background: -ms-linear-gradient(top, rgba(0,0,0,0.75) 0%,rgba(0,0,0,0.75) 100%);
background: linear-gradient(top, rgba(0,0,0,0.75) 0%,rgba(0,0,0,0.75) 100%);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
text-shadow: 0px 1px 0px rgba(0,0,0,0.4);
}
.color-red span:before
{
border-color: rgba(0,0,0,0.75);
}
.color-red span:after
{
content: "";
display: block;
border-top: 1px solid rgba(0,0,0,0.75);
position: absolute;
left: 0px;
top: 1px;
width: 100%;
height: 10px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.color-red span strong
{
background: rgba(0,0,0,0.75);
border-bottom: 1px solid rgba(0,0,0,0.75);
}
<br><br><Br><Br><a class='evento color-red' href="#" class='meu_evento'><span>informação</span>link</a>
Please, can someone help me?
Thank you very much.
Hello, you can test using $('a.event'). removeClass('color-red'), but for better analysis put the code of the tag body, or change to have more identification accuracy the "a. event" for what is most viable.
– Wilson Rosa Gomes
They passed me this code:
– Julio Mac
<script> $(Document). ready(Function() { $('.Event > span').Hide(); // Get the direct Descendant of all Elements with classname 'Event' }); $(Function() { // Bind the click Event to the Anchors with classname 'Event' $(".Event").click(Function() { // Fade in the SPAN Inside the Anchor $(this).find('> span').fadein(); // The other Stuff var commentContainer = $(this); var id = $(this).attr("id"); Alert("The value is "+id); Return false; }); }); </script> But does not maintain the tooltip and Javascript effect
– Julio Mac