Make Tooltip appear when clicking inside the input

Question

Make Tooltip appear when clicking inside the input

Navigation

#1 by (2 votes)
#2 by (0 votes)

3

I have the following problem. I have this js code:

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

I want to do that, when clicking inside the input (sel-tooltip), a tooltip appears on another area of the same page on top of an element. That is, by clicking inside the input to type, the tooltip appears on top of that other element. How can I do it?

1 - Where it will appear

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

2 - Where to hold the event to appear

<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: link

javascript jquery tooltip

asked by anonymous 17.04.2015 / 09:09

2 answers

0

Have you ever tried to use the change in the function of the SEL-TOOLTIP element? - Remember to put this function call inside:

$(document).ready(function(){

)};

Type:

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

Hence in HTML <select name="cidade-busca" id="sel-tooltip" onselect="startTooltip();"> You can take this OnSelect.

17.04.2015 / 13:25

How do you insert complex numbers in Python? Enable button event when pressing key on keyboard

score 2 · Accepted Answer

The problem is that you are not "showing" the tooltip , the $('.tooltip-icon').tooltip('show'); method is missing after creation. That is:

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

Note that this section, you are only "creating" the tooltip , but it is not displaying it

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

The display can be done with a trigger , or manual, as in the example below. More details access the documentation

Here is an example of how it could be done:

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><scriptsrc="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>