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/
It worked. The only problem is that I’m using a plugin called combobox. The code turns out to be different.... *Upei in question.
– Hitch Leonardo
Opa @Leonardoferreira, from there just use the event
change
getting$(document).on('change','select[name="cidade-busca"]', function(){$('.tooltip-icon').tooltip('show');});
– KaduAmaral
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...
– Hitch Leonardo
@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...
– KaduAmaral
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.
– Hitch Leonardo
Kadu, I managed to fix it. Thank you so much for your help. ;)
– Hitch Leonardo