如何在工具提示中使用 HTML？答案

【问题标题】：How to use HTML in the tooltip?如何在工具提示中使用 HTML？
【发布时间】：2019-09-12 05:12:11
【问题描述】：

HTML 在data-toggle="tooltip" 中不工作有什么问题？

我以为data-html="true" 会在工具提示中激活 html，但事实并非如此..

在 HTML 中，

<td class="can_filter"><a href="{{ route('participants.create', $event->id) }}" 
data-toggle="tooltip" data-html="true" title="
<ul>
@foreach ($array as $key=>$value)
    <li>{{ $key }} : {{ $value }}</li>
@endforeach
</ul>"> {{ $event->title }} </a></td>

如果我添加此代码，工具提示将不起作用。

 $(document).ready(function(){
     $('[data-toggle="tooltip"]').tooltip({
         html: true,
         content: function() {
         return $('#tooltip-content').html();
         }
     });
 });

base.blade.php 的<head> 文件仅供参考！

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>DemoProject!!</title>
<link href="{{ asset('css/app.css') }}" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="{{ asset('js/JSfeatures_DP.js') }}"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<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.0/js/bootstrap.min.js"></script>
<script src="{{ asset('js/app.js') }}" type="text/js"></script>
<div class="container">
        @yield('main')
</div>
<button style="margin: 19px;" class="btn btn-dark" name="mode" value="light" onclick="
    Darkmode(this);
">Darkmode</button>
</head>

按原样：HTML 标记显示在工具提示中。

<ul>
  <li> key1 : value1 </li>
  <li> key2 : value2 </li>
</ul>

成为：

key1 : value1
key2 : value2

提前谢谢你！

【问题讨论】：

你说的 JavaScript 不工作被注释掉了。注释掉的代码永远不会运行。
另外请注意，您需要从 jQuery UI CDN 导入 jQuery UI 才能让您的 jQuery 工作。
哦，当然我在执行时不应用评论！并附上base.blade.php 代码！
感谢您取消注释示例中的代码。最好分享您认为应该运行的确切代码。
首先，您的 jQuery 版本存在冲突。

标签： jquery html jquery-ui tooltip

【解决方案1】：

试试这个纯 CSS 解决方案。

  <div class="hover">Hover
        <div class="tooltip">Easy as... <ul>
        <li>One</li>
        <li>Two</li>
        <li>Four..</li>
        <li>Three sir!</li>
        </ul>
        </div>
    </div>

.hover {
    position:relative;
    top:50px;
    left:50px;
}

.tooltip {
  top:-10px;
  background-color:black;
  color:white;
  border-radius:5px;
  opacity:0;
  position:absolute;
  -webkit-transition: opacity 0.5s;
  -moz-transition:  opacity 0.5s;
  -ms-transition: opacity 0.5s;
  -o-transition:  opacity 0.5s;
  transition:  opacity 0.5s;
}

.hover:hover .tooltip {
    opacity:1;
}

Fiddle

【讨论】：

【解决方案2】：

您不应该将 HTML 存储在属性中，这不是一个好习惯。我会建议使用 content 函数将某种类型的数据字符串转换为 HTML。最好创建一个 PHP API，JavaScript 可以在需要时发布/获取数据以获取数据。

考虑以下内容。

$(function() {
  $(".can_filter").tooltip({
    items: "a[data-tooltip]",
    content: function() {
      var item = $(this);
      var data = item.data("tooltip");
      if (item.data("tooltip-type") == "list") {
        var list = $("<ul>");
        $.each(data, function(k, v) {
          $("<li>").html(k + " : " + v).appendTo(list);
        });
        return list;
      } else {
        return data;
      }
    }
  });
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div class="container">
  <table>
    <tr>
      <td class="can_filter"><a href="#" data-tooltip='{"key 1":"value 1","key 2":"value 2"}' data-tooltip-type="list">Link 1</a></td>
    </tr>
    <tr>
      <td class="can_filter"><a href="#" data-tooltip='Take me home'>Link 2</a></td>
    </tr>
  </table>
</div>
<button style="margin: 19px;" class="btn btn-dark" name="mode" value="light">Darkmode</button>

在这里我们可以看到如何利用数据属性来发挥我们的优势。使用它，我可以以 JSON 对象格式存储一串数据，并且可以将其读入内容。您还可以执行 AJAX Get 以类似方式从 API 收集此数据。

【讨论】：

【解决方案3】：

您可以通过以下方法显示工具提示。

<style>
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}
</style>

<a href="#" class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</a>

【讨论】：