Inheritance: 7-Copying Properties

by creativevilla

HTML

<ul class="demo">
    <li class="readMore">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum iste accusantium ea hic sequi in possimus delectus ut dolor tempora quis ipsam atque voluptatem aliquid architecto mollitia sed a repudiandae!</li>
    <li class="readMore">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi iusto delectus recusandae temporibus non perferendis saepe deleniti culpa beatae autem quis voluptatum repellat neque harum optio veniam ipsum distinctio expedita.</li>
    <li class="readMore">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum architecto animi necessitatibus consectetur aspernatur nam praesentium! Sit a eius deserunt esse velit vero assumenda labore sed suscipit dolore aspernatur incidunt!</li>
</ul>

CSS

ul {
    width: 300px;
    margin: 0;
    padding: 0;
}
ul li {
    list-style: none;
    margin-bottom: 10px;
    background: #ccc;
}
.demo .more {
    text-decoration: none;
    color: #000;
    position: relative;
    width: 5px;
    height: 5px;
}
span.tooltip {
    position: absolute;
    width: 200px;
    background: #fff;
    top: 0;
    left: 10px;
}

JavaScript

var tooltipTextArray = [];
$('.readMore').each(function () {
    var len = $(this).text().length,
        newStr, tooltipText;
    newStr = $(this).text().substr(0, 149);
    tooltipText = $(this).text().substr(149);
    tooltipTextArray.push(tooltipText);
    $(this).text(newStr + " ");
    $(this).append('<a class="more" href="javascript: void(0)">...</a>');
});

$('.more').each(function () {
    var index = $('.more').index(this);
    if ($(this).children().length <= 0) {
        $(this).append('<div class="toolTipWrap"> <span class="tooltip">' + tooltipTextArray[index] + '</span> </div>');
    }
});

//$('.tooltip').hide();
/*
$('.more').hover(function () {
    $(this).find('.tooltip').show();
}, function () {
    $(this).find('.tooltip').hide();
});
*/