JSFiddle - React, Tailwind, and code Playground

by raam86

HTML

<h1>The below is for PCs</h1>

<span class="vee-tooltip-right" title="Asynchronous JavaScript and XML">AJAX</span>

<br>
<br>
<span class="vee-tooltip-top" title="JavaScript Object Notation">JSON</span>

<br>
<br>
<span class="vee-tooltip-left" title="Cascading Style Sheets">CSS</span>

<hr>
<hr>
 <h1>Required O/P for Mobiles &amp; Touch Devices</h1>

<span class="vee-tooltip-right" title="">AJAX - Asynchronous JavaScript and XML</span>

<br>
<br>
<span class="vee-tooltip-top" title="">JSON - JavaScript Object Notation</span>

<br>
<br>
<span class="vee-tooltip-left" title="">CSS - Cascading Style Sheets</span>

<br>
<br>
<hr> <span class="temp-class">AJAX</span>

<br>
<br>
<hr>

CSS

span[class*="vee-tooltip-"], span.temp-class {
    background-color: #F7F7F7;
    border: 1px solid #CCCCCC;
    border-radius: 3px 3px 3px 3px;
    box-shadow: -2px 2px 0 rgba(0, 0, 0, 0.2), 2px 2px 0 rgba(0, 0, 0, 0.2);
    color: #333333;
    cursor: help;
    font-size: inherit;
    line-height: 1.4;
    margin: 0 1em;
    padding: 0.1em 0.6em;
    text-shadow: 0 1px 0 #FFFFFF;
    white-space: nowrap;
}
span[class*="vee-tooltip-"]:hover {
    box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
}

JavaScript

$(document).ready(function () {
    var count = $("span[class*='vee-tooltip-']").length;
    console.log("count: " + count);
    var tempText = $("span[class*='vee-tooltip-']").html();
    var tempTitle = $("span[class*='vee-tooltip-']").attr("title");
    var finalString = tempText + " - " + tempTitle;

    console.log("finalString : " + finalString);

    $("span[class*='vee-tooltip-']").each(function () {
        $this = $(this);
        var text = $this.text();
        var title = $this.attr("title");
        console.log("this title " + $this.attr("title"));
        $(this).text(text + title);
    })

    });