CODEWITHSUNDEEP
javascripthtmltooltip
Rokas Šimas
Rokas Šimas

Reputation: 43

Tooltip image instead of text

I found code that does pop a small info window when I drag on the text. Problem is that I want that instead of text it should be image how do I do that? As I understand, so I need to make some changes in "div class="tooltip">Hover over" Code: 

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

.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;

/* Position the tooltip */
position: absolute;
z-index: 1;
top: 100%;
left: 50%;
margin-left: -170px;
}

.tooltip:hover .tooltiptext {
 visibility: visible;
 }
 </style>
 <body style="text-align:center;">

 <h2>Bottom Tooltip</h2>
 <p>Move the mouse over the text below:</p>

  <div class="tooltip">Hover over  
  <span class="tooltiptext">Firebeatz<img  src="https://static.wixstatic.com/media/e2aefa_51973dc920ba493fbf358dee40340ca7~mv2.png/v1/fill/w_511,h_170,al_c/e2aefa_51973dc920ba493fbf358dee40340ca7~mv2.png">
 </div>

 </body>
 </html>

Upvotes: 1

Views: 988

Answers (1)

Wayne Allen
Wayne Allen

Reputation: 1745

You are missing a closing </span> tag. Change the HTML to the following (note the addition of </span>).

<body style="text-align:center;">

 <h2>Bottom Tooltip</h2>
 <p>Move the mouse over the text below:</p>

  <div class="tooltip">Hover over  
  <span class="tooltiptext">Firebeatz<img  src="https://static.wixstatic.com/media/e2aefa_51973dc920ba493fbf358dee40340ca7~mv2.png/v1/fill/w_511,h_170,al_c/e2aefa_51973dc920ba493fbf358dee40340ca7~mv2.png"></span>
 </div>

 </body>

Upvotes: 1

Related Questions