Created
May 20, 2016 17:26
-
-
Save igoralves1/7d8c6d62c20355593de76160e08d5a98 to your computer and use it in GitHub Desktop.
JS - Validação de campo utilizando tooltip -bootstrap
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//Inserir o link para jQuery, js.bootstrap e css.bootstarp. | |
//O CSS exclusivo do tooltip está separado logo abaixo. | |
<textarea id='addItInfo' rows='4' cols='65%' name='prf[info][nm_additionalItInfo]' data-toggle='tooltip' data-placement='left'>$nm_additionalItInfo</textarea> | |
if($('#addItInfo').val()==''){ | |
//alert("Must to fill the field 'REASON TO PRF REQUEST'"); | |
//return false; | |
var msg ="Oops! This field must to be filled"; | |
$('#addItInfo').attr('data-original-title',msg); | |
$('#addItInfo').tooltip('show'); | |
setTimeout( function(){ | |
$('#addItInfo').tooltip('hide'); | |
$('#addItInfo').removeAttr('title'); | |
$('#addItInfo').removeAttr('data-original-title'); | |
} , 2500 ); //Wait 2,5 seconds | |
return false; | |
} | |
//CSS | |
.tooltip { | |
position: absolute; | |
z-index: 1070; | |
display: block; | |
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; | |
font-size: 12px; | |
font-style: normal; | |
font-weight: normal; | |
line-height: 1.42857143; | |
text-align: left; | |
text-align: start; | |
text-decoration: none; | |
text-shadow: none; | |
text-transform: none; | |
letter-spacing: normal; | |
word-break: normal; | |
word-spacing: normal; | |
word-wrap: normal; | |
white-space: normal; | |
filter: alpha(opacity=0); | |
opacity: 0; | |
line-break: auto; | |
} | |
.tooltip.in { | |
filter: alpha(opacity=90); | |
opacity: .9; | |
} | |
.tooltip.top { | |
padding: 5px 0; | |
margin-top: -3px; | |
} | |
.tooltip.right { | |
padding: 0 5px; | |
margin-left: 3px; | |
} | |
.tooltip.bottom { | |
padding: 5px 0; | |
margin-top: 3px; | |
} | |
.tooltip.left { | |
padding: 0 5px; | |
margin-left: -3px; | |
} | |
.tooltip-inner { | |
max-width: 200px; | |
padding: 3px 8px; | |
color: #fff; | |
text-align: center; | |
background-color: #000; | |
border-radius: 4px; | |
} | |
.tooltip-arrow { | |
position: absolute; | |
width: 0; | |
height: 0; | |
border-color: transparent; | |
border-style: solid; | |
} | |
.tooltip.top .tooltip-arrow { | |
bottom: 0; | |
left: 50%; | |
margin-left: -5px; | |
border-width: 5px 5px 0; | |
border-top-color: #000; | |
} | |
.tooltip.top-left .tooltip-arrow { | |
right: 5px; | |
bottom: 0; | |
margin-bottom: -5px; | |
border-width: 5px 5px 0; | |
border-top-color: #000; | |
} | |
.tooltip.top-right .tooltip-arrow { | |
bottom: 0; | |
left: 5px; | |
margin-bottom: -5px; | |
border-width: 5px 5px 0; | |
border-top-color: #000; | |
} | |
.tooltip.right .tooltip-arrow { | |
top: 50%; | |
left: 0; | |
margin-top: -5px; | |
border-width: 5px 5px 5px 0; | |
border-right-color: #000; | |
} | |
.tooltip.left .tooltip-arrow { | |
top: 50%; | |
right: 0; | |
margin-top: -5px; | |
border-width: 5px 0 5px 5px; | |
border-left-color: #000; | |
} | |
.tooltip.bottom .tooltip-arrow { | |
top: 0; | |
left: 50%; | |
margin-left: -5px; | |
border-width: 0 5px 5px; | |
border-bottom-color: #000; | |
} | |
.tooltip.bottom-left .tooltip-arrow { | |
top: 0; | |
right: 5px; | |
margin-top: -5px; | |
border-width: 0 5px 5px; | |
border-bottom-color: #000; | |
} | |
.tooltip.bottom-right .tooltip-arrow { | |
top: 0; | |
left: 5px; | |
margin-top: -5px; | |
border-width: 0 5px 5px; | |
border-bottom-color: #000; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment