4

Estou com o seguinte problema. Tenho esse código js:

// Tooltip
$("#sel-tooltip").select(function startTooltip(){
    $(function() {
        $('.tooltip-icon').tooltip({
        placement: 'top',
        title: 'Sinta-se em casa!'
        });
    });
});

Quero fazer, com que ao clicar dentro do input (sel-tooltip), apareça em outra área da mesma página um tooltip em cima de um elemento. Ou seja, ao clicar dentro do input para digitar, o tooltip aparece em cima desse outro elemento. Como posso fazer?

1 - Onde irá aparecer

<i class="glyphicon glyphicon-map-marker glyp-search tooltip-icon"></i>

2 - Onde irá realizar o evento para aparecer

<div class="col-xs-12 col-sm-4 col-md-4 col-lg-3">
                            <div class="form-group">
                                <input type="hidden" name="inline" value="">
                                <select name="cidade-busca" class="combobox form-control input-lg" tabindex="1" style="display: none; height: 62px;">
                                    <option value="" selected="selected">Selecione seu estado</option>
                                    <option value="AC">Acre</option>
                                    <option value="AL">Alagoas</option>
                                    <option value="AP">Amapá</option>
                                    <option value="AM">Amazonas</option>
                                    <option value="BA">Bahia</option>
                                    <option value="CE">Ceará</option>
                                    <option value="DF">Distrito Federal</option>
                                    <option value="ES">Espírito Santo</option>
                                    <option value="GO">Goiás</option>
                                    <option value="MA">Maranhão</option>
                                    <option value="MT">Mato G.</option>
                                    <option value="MS">Mato G. do Sul</option>
                                    <option value="MG">Minas Gerais</option>
                                    <option value="PA">Pará</option>
                                    <option value="PB">Paraíba</option>
                                    <option value="PR">Paraná</option>
                                    <option value="PE">Pernambuco</option>
                                    <option value="PI">Piauí</option>
                                    <option value="RJ">Rio de Janeiro</option>
                                    <option value="RN">Rio G. do Norte</option>
                                    <option value="RS">Rio G. do Sul</option>
                                    <option value="RO">Rondônia</option>
                                    <option value="RR">Roraima</option>
                                    <option value="SC">Santa Catarina</option>
                                    <option value="SP">São Paulo</option>
                                    <option value="SE">Sergipe</option>
                                    <option value="TO">Tocantins</option>
                                </select>    
                            </div>
                    </div>

LINK NO JSFiddle: https://jsfiddle.net/oyozf3jk/

2 Respostas 2

2

O problema é que você não está "mostrando" o tooltip, falta o método $('.tooltip-icon').tooltip('show'); após a criação. Ou seja:

$("#sel-tooltip").select(function startTooltip(){
    $(function() {
        $('.tooltip-icon').tooltip({
        placement: 'top',
        title: 'Sinta-se em casa!'
        }).tooltip('show');
    });
});

Note que este trecho, você está apenas "criando" o tooltip, mas não está exibindo-o

$('.tooltip-icon').tooltip({
    placement: 'top',
    title: 'Este é o target'
});

A exibição pode ser feita com um trigger, ou manual, como no exemplo abaixo. Mais detalhes acesse a documentação


Segue um exemplo de como poderia ser feito:

jQuery(document).ready(function($) {
	
	$('.tooltip-icon').tooltip({
	    placement: 'top',
	    title: 'Este é o target'
	});

	$(document).on('focus', '#comfoco', function(){
		$('.tooltip-icon').tooltip('show');
	})

	$(document).on('select', '#comselect', function(event){
		$('.tooltip-icon').tooltip('show');
	});
    
    $(document).on('change','#noselect', function(){
        $('.tooltip-icon').tooltip('show');
    });

	$(document).on('blur', '#comfoco, #comselect, #noselect', function(){
		$('.tooltip-icon').tooltip('hide');
	});

});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>


<input type="text" id="comfoco" value="Clique aqui"> <br>
<input type="text" id="comselect" value="Selecione este texto"> <br>
<select id="noselect">
   <option value="" selected="selected">Selecione seu estado</option>
   <option value="AC">Acre</option>
   <option value="AL">Alagoas</option>
   <option value="AP">Amapá</option>
</select><br>
<br><br>
<i class="glyphicon glyphicon-map-marker glyp-search tooltip-icon"></i>

JSFiddle

6
  • Funcionou. O único problema é que estou usando um plugin chamado combobox. O código acaba sendo diferente.... *Upei na pergunta. Commented 17/04/2015 às 15:53
  • Opa @LeonardoFerreira, daí é só usar o evento change ficando $(document).on('change','select[name="cidade-busca"]', function(){$('.tooltip-icon').tooltip('show');});
    – KaduAmaral
    Commented 17/04/2015 às 16:41
  • Kadu, eu tentei essa opção, ela realmente funciona. O problema é que estou usando o plugin combobox do bootstrap. Ele converte meu select em um input para gerar um dropdown de texto no select. Esse é o plugin: bootstrap-combobox-test.herokuapp.com veja essa página para você ver o que ele faz com o select. Eu preciso fazer com que a minha função jquery reconheça esse select que é criado após a conversão... Commented 17/04/2015 às 16:56
  • @LeonardoFerreira tenta simular seu problema no jsfiddle, e coloque o link na pergunta, e coloca o código que te passei, após o código do plugin...
    – KaduAmaral
    Commented 17/04/2015 às 17:01
  • Kadu, coloquei no jsFiddle, a estrutura do html os scripts que utilizei no final, e o js que estou utilizando... Como o style não vai interferir tanto, coloquei no lugar dele, a maneira que o código fica depois que o plugin combobox é aplicado. Commented 17/04/2015 às 17:12
0

Você já tentou usar o change na função do elemento SEL-TOOLTIP ? -- Lembre-se de colocar essa chamada de função dentro do :

$(document).ready(function(){

)};

Tipo:

// Tooltip
$("#sel-tooltip").change({ // Aqui a função CHANGE e tirei o StartToolTip()... 
    $(function() {
        $('.tooltip-icon').tooltip({
        placement: 'top',
        title: 'Sinta-se em casa!'
        });
    });
});

Daí no HTML <select name="cidade-busca" id="sel-tooltip" onselect="startTooltip();"> Pode tirar esse OnSelect.

1
  • Funcionou. O único problema é que estou usando um plugin chamado combobox. O código acaba sendo diferente.... *Upei na pergunta. Commented 17/04/2015 às 16:03

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .