Can you fit the text to a type box?
I have the following:
<div class='about' title='cuadro de varios caracteres'>imagen</div>
I'm exaggerating in the amount of letters but if they are many I need to make that look in a box for example in this 50x50 see a box that I customize osea the title . Is this possible?
Hi, I am sending you this reference, it is based on events with the mouse with jquery and with the title attribute of the image, if you play a bit with the code you can adapt it to your code, any question you can ask me and I'll gladly clarify it . Greetings.
$('.myImg').hover(function(){
txt = $(this).attr('title');
$(this).removeAttr('title');
$('.tooltip').append(txt);
$('.tooltip').show();
});
$('.myImg').mouseleave(function(){
txt = $('.tooltip').text();
$('.myImg').attr('title',txt);
$('.tooltip').empty();
$('.tooltip').hide();
});
$('.tooltip').hide();.wrap{
float: left;
padding: 10px;
background: #ccc;
width: 200px;
height: 200px;
overflow: hidden;
}
.wrap img{
width: 190px;
float: left;
}
.tooltip{
width: 150px;
height: 150px;
background: #FF6;
float: left;
font-size: 12px;
padding: 5px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="wrap">
<img class="myImg" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ex mauris, mattis vel lobortis id, congue in neque. Curabitur bibendum eu urna non ullamcorper. Nam et tortor gravida, commodo eros vel, laoreet enim." src="https://res.cloudinary.com/factra/image/upload/v1517506621/eeenwubouhshpz0wu5g1.jpg">
</div>
<div class="tooltip">
</div>the solution, would be basically generate your own little picture. Here is an example:
HTML.
<div href="#" class="tip">imagen<span>cuadro de varios caracteres</span></a>
CSS.
a.tip {
border-bottom: 1px dashed;
text-decoration: none
}
a.tip:hover {
cursor: help;
position: relative
}
a.tip span {
display: none
}
a.tip:hover span {
border: #c0c0c0 1px dotted;
padding: 5px 20px 5px 5px;
display: block;
z-index: 100;
left: 0px;
margin: 10px;
width: 50px;
height: 50px;
position: absolute;
top: 10px;
text-decoration: none
}