Question

在其他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

Answer 1

根据引导程序文档，您需要在popper.min.js之前包括bootstrap.js，

用于显示和定位的工具提示和弹出窗口（也需要Popper.js）
用于显示和定位的下拉列表（也需要Popper.js）

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

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

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

为什么不尝试使用最新的引导程序版本，但是可以尝试使用此方法...希望对您有所帮助

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

2 个答案: