how can i display code html in attr title

Question

i have two problems

1- hide the default title attr

2- display the code html in the attr title (not the tags but the result)

i can't use any plugin

only the css and jquery(not jquery-ui) are allowed to use

thanks for help

/* 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>
-->

You can use bootstrap tooltips http://getbootstrap.com/javascript/#tooltips — Ismail RBOUH, Jul 16 '16 at 11:02
first, i can't use bootstrap. and second for more informations, how can you put the html in tooltip bootstrap ? — Fahmi B., Jul 16 '16 at 11:04

score 0 · Answer 1 · edited May 23 '17 at 12:32

Your can only put text in title,

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

But You can show an image on hover without bootstrap

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>

see this link

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

how can i display code html in attr title

1 Answers1