下拉菜单中具有动态值的工具提示答案

【问题标题】：Tool Tip with dynamic value in drop down下拉菜单中具有动态值的工具提示
【发布时间】：2020-02-24 07:44:02
【问题描述】：

在其他 html 组件上，如按钮或具有独特设计的属性数据切换工具提示工作正常，请参阅下面的链接作为参考：

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

但是，如果我要实现动态下拉菜单或简单组件，则工具提示中的设计将消失，它会变得简单，如下所示：

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

任何建议或评论如何在下拉菜单上有独特的设计工具提示。我的目标是在用户将鼠标悬停在下拉列表中的每个值上时，提供一个包含文本和图像组合的工具提示。 TIA

【问题讨论】：

标签： html css bootstrap-4 tooltip

【解决方案1】：

根据 bootstrap 文档，您需要在 bootstrap.js 之前包含 popper.min.js ：

用于显示和定位的工具提示和弹出框（也需要 Popper.js）
用于显示和定位的下拉菜单（也需要 Popper.js）

引导文档：https://getbootstrap.com/docs/4.2/getting-started/introduction/#js

我得到了与您想要的类似的东西，请查看：https://stackoverflow.com/a/3314790/11171286

【讨论】：

【解决方案2】：

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

你为什么不试试最新的引导版本，但没关系试试这个...希望这会有所帮助

【讨论】：