Show extra text as tooltip

by creativevilla

HTML

<script src="https://fonts.googleapis.com/css?family=Droid+Sans"></script>
<ul class="demo">
    <li class="readMore">Android is the operating system that powers over 1 billion smartphones and tablets. Since these devices make our lives so sweet, each Android version is named after a dessert: Cupca, Donut, Eclair, Froyo, Gingerbread, Honeycomb, Ice Cream Sandwich, and Jelly Bean. As everyone finds chocolate so tempting, we decided to name the next version of Android after one of our favourite chocolate treats, the KitKat®!</li>
    <li class="readMore">With Android Beam on Jelly Bean you can now easily share your photos and videos with just a simple tap, in addition to sharing contacts, web pages, YouTube videos, directions, and apps. Just touch two NFC-enabled Android devices back-to-back, then tap to beam whatever's on the screen to your friend.</li>
    <li class="readMore">There's no other software quite like Android. Google engineered Android, and Google’s own apps run best on it. And with millions of apps, games, songs, and videos on Google Play, Android is great for fun, and for getting things done.</li>
</ul>

CSS

@import url(http://fonts.googleapis.com/css?family=Droid+Sans);
body {
    font-family: 'Droid Sans';
    font-size: 14px;
}
ul {
    margin: 0;
    padding: 0;
    width: 300px;
}
ul li {
    background: #00a2c7;
    color: #fff;
    list-style: none;
    margin-bottom: 10px;
    padding: 10px;
}
.demo .more {
    text-decoration: none;
    color: #000;
    position: relative;
}
span.tooltip {
    background: #90cb4c;
    border-radius: 10px;
    color: #000;
    left: 10px;
    padding: 10px;
    position: absolute;
    top: 10px;
    width: 200px;
    z-index: 2;
}

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('<span class="tooltip">' + tooltipTextArray[index] + '</span>');
    }
});

$('.tooltip').hide();

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