Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

wneo

Tooltip form não operante

Por , em Javascript

Recommended Posts

wneo    5

wneo
Postado

Pessoal estou implementando uma tooltip nos inputs dos forms...encontrei um perfeito, que aparece a tooltip quando coloco o mouse em cima do input e mantém a mesma quando clico no input...

No js fiddle tá operante:

 

http://jsfiddle.net/tj_vantoll/kyBwU/

 

 

Mas quando tento implementar toh esquecendo de algo e não tá funcionando, toh fazendo assim:

<html>

<head>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" />

<title>tip_form5</title>
<meta charset="utf-8">

<style>
body { padding: 20px; }

input[type="text"] { margin: 100px 0 0 200px; }

.ui-tooltip {
    background: #666;
    color: white;
    border: none;
    padding: 0;
    opacity: 1;
}
.ui-tooltip-content {
    position: relative;
    padding: 1em;
}
.ui-tooltip-content::after {
    content: '';
    position: absolute;
    border-style: solid;
    display: block;
    width: 0;
}
.right .ui-tooltip-content::after {
    top: 18px;
    left: -10px;
    border-color: transparent #666;
    border-width: 10px 10px 10px 0;
}
.left .ui-tooltip-content::after {
    top: 18px;
    right: -10px;
    border-color: transparent #666;
    border-width: 10px 0 10px 10px;
}
.top .ui-tooltip-content::after {
    bottom: -10px;
    left: 72px;
    border-color: #666 transparent;
    border-width: 10px 10px 0;    
}
.bottom .ui-tooltip-content::after {
    top: -10px;
    left: 72px;
    border-color: #666 transparent;
    border-width: 0 10px 10px;
}

</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>

<script>
$('input[type="radio"]').on('change', function() {
    var className = $(this).val();
    var position;
    switch (className) {
        case 'top':
            position = { my: 'center bottom', at: 'center top-10' };
            break;
        case 'bottom':
            position = { my: 'center top', at: 'center bottom+10' };
            break;
        case 'left':
            position = { my: 'right center', at: 'left-10 center' };
            break;
        case 'right':
            position = { my: 'left center', at: 'right+10 center' };
            break;
    }
    position.collision = 'none';
    
    $('input[type="text"]').tooltip('option', 'position', position);
    $('input[type="text"]').tooltip('option', 'tooltipClass', className);
});

$('#options').buttonset();
$('input[type="text"]').tooltip();
$('input[value="right"]').trigger('change');



</script>
</head>

<body>

<div id="options">
    <label for="top">Top</label><input type="radio" name="option" value="top" id="top" />    
    <label for="bottom">Bottom</label><input type="radio" name="option" value="bottom" id="bottom" />
    <label for="left">Left</label><input type="radio" value="left" name="option" id="left" />
    <label for="right">Right</label><input type="radio" value="right" name="option" id="right" checked />
</div>

<div>
    <input type="text" title="I am a tooltip!" />
</div>

</body>

</html>

ajuda pessoal...=/

Compartilhar este post

Link para o post
Compartilhar em outros sites

wilnet    92

wilnet
Postado

olá wneo,

 

seu Script está incompleto.

 

Faltou no início do script:

<script>
$(window).load(function(){

E fechar no final

});

</script>

Ae funfa legal

Compartilhar este post

Link para o post
Compartilhar em outros sites

wneo    5

wneo
Postado

coloca todo seu Script jQuery dentro disso: 

$(document).ready(function(){/* coloca seu código aqui*/});

Simples :)

Resolvido!!!!!=D bhaaa brigadão!

olá wneo,

 

seu Script está incompleto.

 

Faltou no início do script:

<script>
$(window).load(function(){

E fechar no final

});

</script>

Ae funfa legal

Valewww!!!!

Compartilhar este post

Link para o post
Compartilhar em outros sites

wilnet    92

wilnet
Postado

Embora já Resolvido, mas achei essa matéria legal para mostrar o uso do Post#2 e Post#3.

 

LINK

Compartilhar este post

Link para o post
Compartilhar em outros sites

wneo    5

wneo
Postado

Embora já Resolvido, mas achei essa matéria legal para mostrar o uso do Post#2 e Post#3.

 

LINK

obrigado! gostei da materia sobre quando usar o

$(document).ready e $(window).load

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito