如何在 ATTR 标题中显示代码 HTML

how can i display code html in attr title

本文关键字：显示代码 HTML 标题 ATTR 更新时间：2023-09-26

我有两个问题

1-隐藏默认标题属性

2-在attr标题中显示代码html（不是标签，而是结果）

我不能使用任何插件

只允许使用 CSS 和 jquery（不是 jquery-ui）

感谢您的帮助

/* Jquery */
$(document).ready(function(){
  
  var content = ' '
    <div class="title-inner"> '
      <h2>Lorem ipsum</h2> '
      <img src="https://placehold.it/200x200"> '
      <p>Quisque efficitur </p> '
    </div>';
  
  $('#link').attr('title', content);
})

/*CSS*/
.box{
  background-color: #f2f2f2;
  width: 50%;
  padding: 20px;
}
.box a{
  color: #fff;
  text-decoration: none;
  display: inline-block;
  background-color: #ff6600;
  padding: 10px 30px;
  border: 1px solid #ff6600;
}
.box a:hover{
  color: #ff6600;
  background-color: transparent;
}
.box a[title]:hover:after {
  content: attr(title);
  padding: 4px 8px;
  color: #333;
  position: absolute;
  margin-right: -20px;
  margin-top: 10px;
  z-index: 20;
  white-space: nowrap;
  border-radius: 5px;
  box-shadow: 0px 0px 4px rgba(0,0,0,0.5);
  background-color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Code HTML -->
<div class="box">
<a href="#" id="link" title="the title">Link</a>
</div>
<!-- this is the code to display in title attr-->
<!--
<div class="title-inner">
  <h2>Lorem ipsum</h2>
  <img src="https://placehold.it/200x200/ffff00/000000/?text=image-1" alt="image">
  <p>Quisque efficitur arcu a sollicitudin consectetur. Etiam sit amet dui id sem porttitor faucibus non vitae sem. Donec tortor metus, tincidunt vitae viverra eu, pharetra mattis ipsum</p>
</div>
-->

你只能把文本放在title ，

var content = 'Your title content';
$('#link').attr('title', content);

但是您可以在悬停时显示图像而无需引导

.css

div {
    display: none;
}
a:hover + div {
    display: block;
}

.html

<div class="box">
<a href="#" id="link" title="the title">Link</a>
</div>
<a>Hover over me!</a>
<div><img src="https://placehold.it/200x200"></div>

查看此链接

仅使用 CSS，将鼠标悬停在相关文章：