Description text after hovering profile image

Question

I want to display text after hovering a profile picture. I made the tag "title", but it can not display the text in different paragraphs. Are there alternative ways to do this?

Here is my CSS code:

.tooltip { display:none; position:absolute; border:1px solid #333; background-color:#161616; border-radius:5px; padding:10px; color:#fff; font-size:12px Arial; } 

Here is my html code:

 <table style="width:100%"> <tr> <td><a><img src="http://2017.igem.org/wiki/images/2/26/Andrew.PNG" width="200" height="200" class="masterTooltip" title="Name: Ching Yuet To; Major/Year: Cell and Molecular Biology/3 "></a></td> <td><img src="http://2017.igem.org/wiki/images/d/de/Venus.PNG" width="200" height="200"></td> <td><img src="http://2017.igem.org/wiki/images/8/84/Cathy.PNG" width="200" height="200"></td> </tr> </table> <script> $(function () { $(document).tooltip({ content: function () { return $(this).prop('title'); } }); }); </script> 

Answer 1

This is an alternative way to do this. Just a few changes to your source code. Hope this helps.

 a { position: relative; } a:after { position: absolute; display: none; content: attr(data-tooltip); bottom: 0; border: 1px solid #333; background-color: #161616; border-radius: 5px; padding: 10px; color: #fff; font-size: 12px Arial; } a:hover:after { display: block; } 

 <table style="width:100%"> <tr> <td><a data-tooltip="Name: Ching Yuet To; Major/Year: Cell and Molecular Biology/3"><img src="http://2017.igem.org/wiki/images/2/26/Andrew.PNG" width="200" height="200" class="masterTooltip"></a></td> <td><a data-tooltip="Tooltip"><img src="http://2017.igem.org/wiki/images/d/de/Venus.PNG" width="200" height="200"></a></td> <td><a data-tooltip="Tooltip"><img src="http://2017.igem.org/wiki/images/8/84/Cathy.PNG" width="200" height="200"></a></td> </tr> </table> 

Answer 2

You can put line breaks in your actual HTML to split the contents of the header text into separate lines by pressing enter, for example:

 <table style="width:100%"> <tr> <td><a><img src="http://2017.igem.org/wiki/images/2/26/Andrew.PNG" width="200" height="200" class="masterTooltip" title="Name: Ching Yuet To; Major/Year: Cell and Molecular Biology/3 "></a></td> 

Or use the line break character as follows:

 title="First paragraph

Second paragraph 

Violin:

https://jsfiddle.net/uukaw084/1/

Answer 3

The jqueryUI hint alternative just defines your own simple tooltip plugin so that it can be customized to suit your requirements.

This simple popup plugin displays a tooltip regarding the position of the mouse.

 let tooltips = $('.tooltip span'); (function($) { $.fn.mytooltip = function(e) { let x = (e.pageX + 20) + 'px', y = (e.pageY + 20) + 'px'; for (let i = 0; i < tooltips.length; i++) { tooltips[i].style.top = y; tooltips[i].style.left = x; } return this; }; }(jQuery)); $('a').on('mousemove', function(e) { $(this).mytooltip(e); }); 

 .tooltip { text-decoration: none; position: relative; } .tooltip span { display: none; } .tooltip:hover span { display: block; background: rgba(0, 0, 0, .8); color: #fff; border-radius: 5px; padding: 5px 15px; position: fixed; overflow: hidden; z-index: 99; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a class="tooltip"> <img alt="" src="http://2017.igem.org/wiki/images/2/26/Andrew.PNG" width="200" height="200" /> <span>hiiiiii</span> </a> <a class="tooltip"> <img alt="" src="http://2017.igem.org/wiki/images/d/de/Venus.PNG" width="200" height="200" /> <span>hello</span> </a> 

Hope this alternative solution works for you. !!

Answer 4

You should help jquery.Like This:

 $(document).ready(function(){ $('img').on('mousemove',function(e){ var txt =""; var x = $(this).attr('data').split(';'); $.each(x, function( index, value ) { txt += value + "<br>"; }) $('.myTooltip').css({'left':e.clientX + 10,'top':e.clientY}) $('.myTooltip').html(txt).show(); }) $('img').on('mouseleave',function(){ $('.myTooltip').hide(); }) }) 

 .myTooltip { background-color: rgba(0,0,0,0.8); color: orange; display: inline-block; position: absolute; cursor: pointer; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <table style="width:100%"> <tr> <td> <a> <img src="http://2017.igem.org/wiki/images/2/26/Andrew.PNG" width="200" height="200" class="masterTooltip" data="Name: Ching Yuet To; Major/Year: Cell and Molecular Biology/3 "> </a> </td> <td> <a> <img data="Name: Maryam; Major/Year:Geneticist/40" src="http://2017.igem.org/wiki/images/d/de/Venus.PNG" width="200" height="200"> </a> </td> <td> <a> <img data="Name: Shila Amir; Major/Year:Laboratory sciences / 29 " src="http://2017.igem.org/wiki/images/8/84/Cathy.PNG" width="200" height="200"> </a> </td> </tr> </table> <span class="myTooltip"></span>