html – Tool Tip with dynamic value in drop down-ThrowExceptions

Exception or error:

On other html component like buttons or attribute data-toggle tool-tip with unique design are working fine see here link below as reference:

However If I’m going to implement to dynamic dropdown or simple component the design from the tooltip will be gone and it will become plain, something like this:

<link rel="stylesheet" href="">
<script src=""></script>
<script src=""></script>

<script type="text/javascript">
    $(document).ready(function () {

    <option data-toggle="tooltip" title="Hooray1">Hooray1</option>
    <option data-toggle="tooltip" title="Hooray2">Hooray2</option>
    <option data-toggle="tooltip" title="Hooray3">Hooray3</option>

Any suggestion or comment how to have unique design tooltip on the dropdown. My aim is to have a tooltip with combination of text and image when the user hover for each value on the dropdown. TIA

How to solve:

As per bootstrap Documentation, you need to include popper.min.js before bootstrap.js for:

  • Tooltips and popovers for displaying and positioning (also requires Popper.js)
  • Dropdowns for displaying and positioning (also requires Popper.js)

Bootstrap Documentation:

I got something similar to what you want, check here:


animated: 'fade',
placement: 'top',
html: true
.avatar {
  vertical-align: middle;
  width: 50px;
  height: 50px;
  border-radius: 50%;
<!DOCTYPE html>
<html lang="en">

  <title>Simple Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="">
  <script src=""></script>
  <script src=""></script>
  <script src=""></script>



    <a href="#" data-toggle="tooltip" title="<img class='avatar' src=''/> <span><br>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry.</span>">


why don’t you try the latest bootstrap version but it’s okay try this… Hope this will help

Leave a Reply

Your email address will not be published. Required fields are marked *