Results 1 to 2 of 2

Thread: apply css to bootstrap tooltip title in a Jquery function

  1. #1
    Junior Member
    Join Date
    Sep 2016
    Posts
    2

    Question apply css to bootstrap tooltip title in a Jquery function

    I use the following JQuery function for applying tooltips for (only) the 2nd column in a webform gridview which uses a webmethod -- using asp.net boundfields in this gridview (not asp.net labels). Thus, I required the JQuery function to apply the tooltip the the specified cell in the gridview. The problem I am having is in applying css to the tooltip title. The problem arises when I add -- container: 'body' to $(this).tooltip({.....}). If I don't include container:'body' then the tooltips become very unstable in large datasets and jump upward direction from row 1100 to row 600 for example: When I add -- container: 'body' this stabilizes the tooltips and they stay on the row I am currently on. However, container: 'body' seems to override title:$(this).addclass("mycssclass") and I lose the custom formatting for the tooltip title and I get the default bootstarp format. How can I apply css to the tooltip title here and keep the tooltip stable? (note: titel is distinguished from title in var titel)

    Code:
    $(function () {
       $.ajax({
           type: "POST",
           url: "WebForm3.aspx/GetMyStuff",
           contentType: "application/json;charset=utf-8",
           data: {},
           dataType: "json",
           success: function (data) {                        
           $('[id*=GridViewA] tr').each(function (n) {
              $(this).find("td:eq(1)").each(function () {                                
                  var titel = typeof (data.d[n - 1]) === 'undefined' ? "" : data.d[n - 1].firstN + "<br />" + data.d[n - 1].lastN;        
                  $(this).tooltip({container: 'body' title: $(this).addClass("colr-tooltip"), title: titel, html: true, placement: "bottom" });
              });
           });
         },
          error: function () { alert("error"); }
       });
    });
    Code:
    <style type="text/css">
    .colr-tooltip + .tooltip > .tooltip-inner
       {
            width: 200px;
            max-width: 600px !important;
            background-color: gainsboro;
            color: blue;
            text-align: left;
            opacity: 1;
            filter: alpha(opacity=100);  
           -moz-box-shadow: 0 0 5px 2px black;
           -webkit-box-shadow: 0 0 5px 2px black;
           box-shadow: 0 0 5px 2px black;   
       }
    </style>

  2. #2
    Junior Member
    Join Date
    Sep 2016
    Posts
    2

    Post

    I figured it out -- in the line

    Code:
    var titel = typeof (data.d[n - 1]) === 'undefined' ? "" : data.d[n - 1].firstN + "<br />" + data.d[n - 1].lastN;
    I just embed an html table and add all the properties there

    Code:
    var titel = typeof (data.d[n - 1]) === 'undefined' ? "" : "<table  style='color:blue;background-color:lightgreen;width:100px;text-align:left;'><tr><td>" + data.d[n - 1].firstN + "</td></tr><tr><td>" + data.d[n - 1].lastN + "</td></tr></table>";

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •