web-dev-qa-db-fra.com

Info-bulle ou commentaire pour les options sélectionnées

Im en utilisant bootstrap sélectionnez pour mes listes déroulantes. Je suis intéressé est-il possible d'ajouter un commentaire ou une info-bulle pour chaque option qui apparaîtrait immédiatement lorsque je passe la souris dessus? Chaque commentaire compte entre 20 et 30 mots, ce qui en fait un bon candidat dans la liste.

Pour le moment, je n'ai que l'élément select:

<select class="selectpicker" multiple="">
<option>option1</option>
<option>option2</option>
<option>option3</option>
<option>option4</option>
</select>
$('select').selectpicker();

http://jsfiddle.net/mfrup5bL/136/

javascriptjqueryhtmlcsstwitter-bootstrap
4
user1985273

Regardez cela, cela fonctionne bien avec bootstrap select. Le bootstrap select est une liste non ordonnée de vos options select.

$(".selectpicker").selectpicker()
var title = [];
$('#mySelect option').each(function(){
    title.Push($(this).attr('title'));
});

$("ul.selectpicker li").each(function(i){
  $(this).attr('title',title[i]).tooltip({container:"#tooltipBox"});
})
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.5.4/bootstrap-select.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.5.4/bootstrap-select.min.js"></script>
    		<div class="col-sm-6" style="margin-top:10px;">
    				<select class="selectpicker form-control" id="mySelect" multiple>
    					<option title="Option 1">option one</option>
    					<option title="Option 2">option two</option>
    					<option  title="Option 3">Option three</option>
    					<option title="Option 4">Option four</option>
    					</select>
              <p id="tooltipBox" class="col-sm-6" style="z-index:9999;"></p>
    				</div>

3
Abk

Veuillez vous reporter à l'exemple ci-dessous pour ajouter un commentaire/une info-bulle à chaque option à l'aide de bootstrap.

$(document).ready(function() {
  $('[data-toggle="tooltip"]').tooltip();
});
<select class="selectpicker" multiple="">
<option value="option1" data-toggle="tooltip" data-container="#tooltip_container" title="comment for option1">option1</option>
<option value="option2" data-toggle="tooltip" data-container="#tooltip_container" title="comment for option2">option2</option>
<option value="option3" data-toggle="tooltip" data-container="#tooltip_container" title="comment for option3">option3</option>
<option value="option4" data-toggle="tooltip" data-container="#tooltip_container" title="comment for option4">option4</option>
</select>
<div id="tooltip_container"></div>
</div>
<div class="col-sm-4"></div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

0
v-stackOverFollower

Si vous avez de longues info-bulles ou si vous souhaitez utiliser HTML dans l'info-bulle:

<div class="form-group">
<label for="myID">Test</label>
  <select class="form-control" id="myID" name="myID" data-toggle="tooltip" data-placement="top" data-html="true">
    <option>option1</option>
    <option>option2</option>
    <option>option3</option>
    <option>option4</option>
  </select>
</div>

<script>
$('#myID').tooltip({'trigger':'focus', 'title': 'This is my tooltip. You can use <b>HTML</b>.'});
</script>

J'ai créé un JSFiddle: https://jsfiddle.net/15o0t2ju/1/

vous pouvez modifier data-placement = "top" en bas, à gauche, à droite. vérifier le document: https://www.w3schools.com/bootstrap/bootstrap_tooltip.asp

0
grusl83

Essaye ça. Copie de travail jointe.

<option value="1" title="Long description">Short desc...</option>


<select>
  <option value="1" title="Long description Long description Long description Long description Long description Long description Long description Long description Long description Long description Long description">Short desc...</option>
  <option value="volvo" title="i AM a generic content">Volvo</option>
  <option value="saab" title="Long description">Saab</option>
  <option value="opel" title="Long description">Opel</option>
  <option value="audi" title="Long description">Audi</option>
</select>
À votre exemple:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

  <select class="form-control" id="myID" name="myID" data-toggle="tooltip" data-placement="top" data-html="true">
    <option title="Long description Long description Long description Long description Long description Long description Long description Long description Long description Long description Long description">option1</option>
    <option title="Long description Long description Long description Long description Long description Long description Long description Long description Long description Long description Long description">option2</option>
    <option title="Long description Long description Long description Long description Long description Long description Long description Long description Long description Long description Long description">option3</option>
    <option title="Long description Long description Long description Long description Long description Long description Long description Long description Long description Long description Long description">option4</option>
  </select>
</div>

0
nabanita