Tool Tip with dynamic value in drop down

Question

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

https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_tooltip&stacked=h

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="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<script type="text/javascript">
    $(document).ready(function () {
            $('[data-toggle="tooltip"]').tooltip();
       });
</script>>

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

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

Manas Khandelwal · Answer 1 · 2020-02-24T08:04:55.820

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: https://getbootstrap.com/docs/4.2/getting-started/introduction/#js

I got something similar to what you want, check here: https://stackoverflow.com/a/3314790/11171286

Saif Warsi · Answer 2 · 2020-02-24T09:36:05.443

$('a[data-toggle="tooltip"]').tooltip({
animated: 'fade',
placement: 'top',
html: true
});

.avatar {
  vertical-align: middle;
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Simple Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>

<body>

 

    <a href="#" data-toggle="tooltip" title="<img class='avatar' src='https://www.w3schools.com/w3images/avatar5.png'/> <span><br>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry.</span>">
       Anonymous
    </a>

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

Tool Tip with dynamic value in drop down

2 Answers2