Change link tooltip class

Question

Change link tooltip class

Asked 8 years, 8 months ago

Viewed 133 times

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

2016/03/29 at 17:34
They passed me this code:

– Julio Mac

2016/03/29 at 19:22
<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

2016/03/29 at 19:23

1 answer

Browser other questions tagged css link tooltip

You are not signed in. Login or sign up in order to post.

by forumcodigosnaweb • **193** points · Answer 1 · 2016-03-30T21:02:37+00:00

With jQuery you can

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

<script>
$(function() {

$(".evento").addClass("evento color-red");

 });
</script>

<a class="evento" href="#"><span>informação</span>link</a>

You will take the element and switch to the full class to work the script.