как я могу показать код HTML в заголовке атр

Question

у меня есть две проблемы

1- скрыть заголовок по умолчанию атр

2- отображения кода 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> 
 
-->

Answer 1

Вы можете поместить только текст в 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> 

эта ссылка

Using only CSS, show div on hover over <a>