webentwicklung-frage-antwort-db.com.de

Tooltip oder Kommentar für Auswahloptionen

Ich benutze Bootstrap Select für meine Dropdowns. Ist es möglich, für jede Option einen Kommentar oder einen Tooltip hinzuzufügen, der sofort angezeigt wird, wenn ich mit der Maus darüberfahre? Jeder Kommentar ist ungefähr 20-30 Wörter lang und passt daher gut in die Liste.

Im Moment habe ich nur das ausgewählte Element:

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

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

4
user1985273

Schauen Sie sich das an, es funktioniert gut mit Bootstrap-Auswahl. Die Bootstrap-Auswahl ist eine ungeordnete Liste Ihrer Auswahloptionen.

$(".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

In dem folgenden Beispiel erfahren Sie, wie Sie mit bootstrap für jede Option einen Kommentar/Tooltip hinzufügen.

$(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

Wenn Sie lange Tooltips haben oder HTML innerhalb des Tooltips verwenden möchten:

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

Ich habe ein JSFiddle erstellt: https://jsfiddle.net/15o0t2ju/1/

sie können data-placement = "top" nach unten, links, rechts ändern. check doc: https://www.w3schools.com/bootstrap/bootstrap_tooltip.asp

0
grusl83

Versuche dies. Arbeitskopie beigefügt.

<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>
Zu Ihrem Beispiel:

<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