html - 工具提示和 html 问题?
问题描述
我的代码如下。html标签中的工具提示<del> </del>
不起作用为什么?
<del>test</del>
不显示带有删除线的测试文本。我错过了什么?
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l"
crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<button type="button" class="btn btn-secondary" data-toggle="tooltip"
data-html="true"
title="<div class='col-12'><div class='row'><div class='col-4'>test</div><div class='col-4'><del>test</del></div><div class='col-4'>test</div></div></div>">
Tooltip with HTML
</button>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns"
crossorigin="anonymous"></script>
<script>
$(function () {
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</body>
</html>
看起来如此简单的代码怎么行不通:(
我查看了 Bootstrap 文档,但我无法理解。它应该工作。
解决方案
解决方案:当我们使用<s> test </s>
标签而不是<del> test </del>
标签时,它可以作为删除线文本正常工作。
推荐阅读
- vba - 使用 Application.GetOpenFileName 过滤掉 VBA 中的文件夹
- javascript - 替换一个对象内的钩子 useState
- java - java中使用Executors类调用ExecutorService接口的execute方法
- google-analytics - 独特的事件!= 会话?
- azure - 使用调度程序和变量组运行 Azure DevOps CI 管道
- python - 将BLOB文件转换为图像MYSQL python
- javascript - JavaScript:如何对嵌套数组中的时间进行排序?
- numbers - 我有一个关于在正则表达式中匹配字符串中的前 5 位数字的问题
- azure - AZURE 突触分析 - 如何关联表?
- npm - package.json : "main:umd": "dist/umd/bundl.js" 的目标是谁?哪个工具可以使用它?它是 umd 的标准名称吗?