Currently I output a text from my database with the following code:

if ($data["own_subject"][$x]!="") { <td><p>".$data["own_subject"][0]."</p></td> }

I found a JS function to only show the first 10 characters and once someone does a mouseover the whole text appears. This function is working with the following code and it is working fine:

<script>
    var lengthText = 10;
    var text = $('p').text();
    var shortText = $.trim(text).substring(0, lengthText).split(" ").slice(0, -1).join(" ") + "...";

    $('p').text(shortText);

    $('p').hover(function () {
        $(this).text(text);
    }, function () {
        $(this).text(shortText);
    });
</script>

Now I do not like the style of the oute and I would like to show the full text in some kind of a tooltip. I am using bootstrap and bootstrap has this function. My problem is now that I do not know how I need to change my JS code to show the full length text in a tooltip. Can someone help me out and show me how I need to change my current code?

I would really appreciate your any help.

Thanks, Chris

Currently I output a text from my database with the following code:

if ($data["own_subject"][$x]!="") { <td><p>".$data["own_subject"][0]."</p></td> }

I found a JS function to only show the first 10 characters and once someone does a mouseover the whole text appears. This function is working with the following code and it is working fine:

<script>
    var lengthText = 10;
    var text = $('p').text();
    var shortText = $.trim(text).substring(0, lengthText).split(" ").slice(0, -1).join(" ") + "...";

    $('p').text(shortText);

    $('p').hover(function () {
        $(this).text(text);
    }, function () {
        $(this).text(shortText);
    });
</script>

Now I do not like the style of the oute and I would like to show the full text in some kind of a tooltip. I am using bootstrap and bootstrap has this function. My problem is now that I do not know how I need to change my JS code to show the full length text in a tooltip. Can someone help me out and show me how I need to change my current code?

I would really appreciate your any help.

Thanks, Chris

• javascript
• php
• jquery
• html
• twitter-bootstrap

• simply by using the html attribute title? – Yoplaboom Commented Jan 11, 2016 at 12:07

4 Answers 4

• Add your original text in title attribute of p tag which I hope you are already doing.
• Add data-toggle="tooltip" data-placement="top" attributes to p tag

Ex

<p data-toggle="tooltip" data-placement="top" title='".$data["own_subject"][0]."'>".$data["own_subject"][0]."</p>

• Initiate as $('[data-toggle="tooltip"]').tooltip() Also you can now remove $('p').hover event.

Ex

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

You can do this using tooltip of bootstrap

   <button id="test" type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom"> 

Tooltip on Bottom

$(function() { 
   var lengthText = 10;
   var text = $('#test').text();
   var shortText = $.trim(text).substring(0, lengthText).split(" ").slice(0, -1).join(" ") + "...";

   $('#test').prop("title", text);
   $('#test').text(shortText);

   $('[data-toggle="tooltip"]').tooltip();
})

http://plnkr.co/edit/5hHRjULpDlMP3cYhHhU4?p=preview

You can add title attribute with real text to you element and call bootstraps tooltip init over that elements, also you need to remove current hover handler from your script

$('p').text(shortText);
// Add title with real text to your element
$('p').attr('title', text);

// And all in document ready bootstrap tooltip init for your short text tags
$( document ).ready(function() {
    $('p').tooltip();
});

check more about boostrap tolltip here: http://www.w3schools./bootstrap/bootstrap_ref_js_tooltip.asp

Try simple html tooltip using title.

if ($data["own_subject"][$x]!="") { <td><p title='".$data["own_subject"][0]."'>".$data["own_subject"][0]."</p></td> }