Change the class of the tooltip link

Question

Change the class of the tooltip link

Navigation

#1 by (0 votes)

0

Expensive, good afternoon.

I have the tooltip link set to:

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

You can leave this way and keep the attributes tooltip:

<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 anyone help me?

Thank you very much.

css link tooltip

asked by anonymous 29.03.2016 / 18:06

1 answer

Update table using PDO with 2 foreachs Array with no size limit

score 0 · Answer 1

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'll get the element and switch to the entire class to run the script.