0

I'm trying to display a tooltip with an image when the user mouses through each option in a select menu.

Here is my select item:

<label for="">Vehicle</label>
<select name="car" id="car" class="ui fluid dropdown">
        <option value="Chevrolet">Chevrolet Impala</option>
        <option value="Mustang">Mustang GT500</option>
        <option value="Hemi Cuda">Hemi Cuda</option>
                    <option value="Tundra">Toyota TUNDRA</option>
 </select>

Can anyone help??

Kevin Nyawakira
  • 5
  • 3

1 Answers1

1

$('select option').each(function() {
  $('.fake-select ul').append("<li data-val='" + this.value + "' data-img='" + this.dataset.img + "'>" + this.innerHTML + "</li>");
});
$('.fake-select').on('click', function() {
  $(this).addClass('active');
})
$('.fake-select ul').on('mouseenter', 'li', function() {
  $('.img img').attr('src', this.dataset.img);
})
$('.fake-select ul').on('click', 'li', function() {
event.stopPropagation()
  $('.fake-select').removeClass('active');
  $('.selected').html(this.dataset.val);
})
select {
  display: none;
}

ul {
  list-style-type: none;
}

.fake-select ul {
  display: none;
}

.fake-select.active ul {
  display: inline-block;
}

.selected:hover {
  cursor: pointer;
}

.fake-select li:hover {
  background-color: blue;
  color: #fff;
  cursor: pointer;
}

.fake-select:hover .img {
  outline: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="">Vehicle</label>
<select name="car" id="car" class="ui fluid dropdown">
        <option value="Chevrolet" data-img="path">Chevrolet Impala</option>
        <option value="Mustang" data-img="path">Mustang GT500</option>
        <option value="Hemi Cuda" data-img="path">Hemi Cuda</option>
        <option value="Tundra" data-img="path">Toyota TUNDRA</option>
 </select>
<div class="fake-select">
  <div class="selected">place holder</div>
  <ul></ul>
  <div class="img"><img src="" /></div>
</div>

is this answers your question better?

ShlomyN
  • 426
  • 2
  • 5