Make Tooltip appear by clicking inside the input

Asked

Viewed 1,377 times

4

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 make, by clicking inside the input (sel-tooltip), appear in another area of the same page a tooltip on top of an element. That is, when clicking inside the input to type, the tooltip appears on top of this other element. How can I do?

1 - Where 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 IN JSFIDDLE: https://jsfiddle.net/oyozf3jk/

javascript jquery tooltip

2 answers

2


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

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

Note that this excerpt, you are just "creating" the tooltip, but you’re not showing it

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

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

Here’s 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>
<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

  • It worked. The only problem is that I’m using a plugin called combobox. The code turns out to be different.... *Upei in question.

  • Opa @Leonardoferreira, from there just use the event change getting $(document).on('change','select[name="cidade-busca"]', function(){$('.tooltip-icon').tooltip('show');});

  • Kadu, I tried this option, it really works. The problem is that I am using the bootstrap combobox plugin. It converts my select into an input to generate a text dropdown in select. This is the plugin: http://bootstrap-combobox-test.herokuapp.com/ see this page to see what it does with select. I need to make my jquery function recognize that select that is created after conversion...

  • @Leonardoferreira tries to simulate his problem in jsfiddle, and put the link in the question, and put the code I gave you, after the plugin code...

  • Kadu, I put in jsFiddle, the html structure the scripts I used at the end, and the js I’m using... As the style will not interfere so much, I put in its place, the way the code looks after the combobox plugin is applied.

  • Kadu, I managed to fix it. Thank you so much for your help. ;)

Show 1 more comment

0

Have you tried changing the SEL-TOOLTIP element function? -- Remember to place this function call inside the :

$(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 that Onselect.

  • It worked. The only problem is that I’m using a plugin called combobox. The code turns out to be different.... *Upei in question.

Browser other questions tagged javascript jquery tooltip

You are not signed in. Login or sign up in order to post.