Home Forums Porto Admin Template Adding Tooltips to dynamically created elements.

This topic contains 3 replies, has 2 voices, and was last updated by  Support2 5 days, 18 hours ago. This post has been viewed 69 times

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #10023468

    karane
    Participant

    Hello,

    I’ve created a responsive table with a column that contains multiple strings for each <td> element. For each string in that <td> element, I would like a way to add a tool tip. I can embedded it in the html for the string as below. However, when I go to save the row, it just accesses the value from the input tag and all the extra html is lost so the tooltip doesn’t work. Is there a way to accomplish this?

    rowEdit: function( $row, tipToDisplay ) {
    var _self = this,
    tempStr,
    data;

    data = this.datatable.row( $row.get(0) ).data();

    $row.children( ‘td’ ).each(function( i ) {
    var $this = $( this );

    if ( i == 3 ) { // My Strings
    var myStringList = data[i].split(‘,’);
    for ( var j = 0; j < myStringList.length; ++j ) {
    tempStr += “<div class=\”tooltip\”><input type=\”text\” class=\”form-control input-block\” value=\'” + myStringList[j] + “\’><span class=\”tooltiptext\”>” + tipToDisplay + “</span></div><br>”;
    }

    $this.html(tempStr);
    }
    else {
    $this.html( ‘<input type=”text” class=”form-control input-block” value=”‘ + data[i] + ‘”/>’ );
    }

    rowSave: function ( $row ) {
    var _self = this,
    values = [];

    values = $row.find(‘td’).map(function() {
    var $this = $(this);

    return $.trim( $this.find(‘input’).val() );
    });

    this.datatable.row( $row.get(0) ).data( values );

    this.datatable.draw();
    }


    #10023479

    Support2
    Keymaster

    Hello,

    This is complicated to do but maybe the code below help you with that. I used as base your code and added more.

    1) Replace the methods “rowEdit” and “rowSave” with this new on link below:
    https://pastebin.com/raw/in3GS1mC
    * Note that changed the tooltip html structure and initialize the tooltip on the code.
    * In my test i used the string with comma on the first column. If you want to change the column just change the value of if ( i == 0 ) { // My Strings to the number of column that you wish.

    I hope this help you.

    Kind Regards,

    Rodrigo.


    #10023507

    karane
    Participant

    Thank you so much! It works almost perfectly. The only issue I am having is when scrolling the page. On scrolling, everything in the table scrolls cleanly behind the page header ( i.e. goes into the background so it doesn’t interfere with viewing the header ) except for the “My Strings” column that was modified by above. All of the “My Strings” text appears over the header instead of going into the background when scrolling the page.

    Any ideas on how to fix that? I assume it is being caused by the Bootstrap Tooltip css.

    Thanks!


    #10023509

    Support2
    Keymaster

    Hello,

    You can fix that with CSS “z-index”, for it please follow the steps below:

    1) Change the “tempStr” var of “rowEdit” to:

    tempStr += '<div class="tooltip" data-toggle="tooltip" data-placement="top" title="Tooltip on top" style="opacity: 1; z-index: 1;"><input type="text" class="form-control input-block" value="' + myStringList[j] + '"></div><br>';

    2) Change the “tooltipWrap” var of “rowSave” to:

    tooltipWrap += '<div class="tooltip" data-toggle="tooltip" data-placement="top" title="Tooltip on top" style="opacity: 1; z-index: 1;">' + $(this).find('input').val() + '</div><br>';

    Please, try that and let me know if you need further assistance.

    Kind Regards,

    Rodrigo.


Viewing 4 posts - 1 through 4 (of 4 total)