Tooltip to show project details RRS feed

  • Question

  • User1976712435 posted

    Hi guys I need to create a tooltip display like i attached below.It is for showing project details for paticular time range.I have attached the time range also.could you please help me out with this.

    ToolTip example


    Sunday, April 1, 2018 1:08 PM

All replies

  • User475983607 posted
    Your question is far too open to answer on a support forum. It sounds like you need help writing a feature from the UI to data access. Can you at least post code that shows the problem you are struggling with.
    Sunday, April 1, 2018 1:47 PM
  • User1976712435 posted

    I tried several things,but they did't work.At least could tell me how to do it.some links may will helps also.

    Sunday, April 1, 2018 2:57 PM
  • User-832373396 posted

    Hi Praboda,

    .some links may will helps also.

    Sir, I recommend that Modal pop up


    and code

    @section scripts  
        <script src="~/Scripts/jquery-1.10.2.min.js"></script>      
        <script src="~/Scripts/bootstrap.min.js"></script>  
        var TeamDetailPostBackURL = '/Home/Details';  
        $(function () {  
            $(".anchorDetail").click(function () {  
                var $buttonClicked = $(this);  
                var id = $buttonClicked.attr('data-id');  
                var options = { "backdrop": "static", keyboard: true };  
                    type: "GET",  
                    url: TeamDetailPostBackURL,  
                    contentType: "application/json; charset=utf-8",  
                    data: { "Id": id },  
                    datatype: "json",  
                    success: function (data) {  
                    error: function () {  
                        alert("Dynamic content load failed.");  
            //    $('#myModal').modal('hide');    
            $("#closbtn").click(function () {  


    and https://www.codeproject.com/Tips/826002/Bootstrap-Modal-Dialog-Loading-Content-from-MVC-Pa 

    Or https://www.w3schools.com/bootstrap/bootstrap_tooltip.asp 


    Hope it gives you something idea :)

    With regards, Angelina Jolie

    Tuesday, April 3, 2018 8:25 AM
  • User438705957 posted

    How are you creating the data table?

    I have an app that creates the table through jQuery and appends a span tag to an anchor tag.
    The span tag contains the body of the tooltip, which can be anything you want.

    $toolSpan = $('<span/>', {
                                text: $fileLoc

    I then have styling in the CSS for it to pop up when hovered over.
    The CSS assumes that the span is contained in a <td> with a class of full_name

     td.full_name:hover span {
                display: block;
                content: attr(title);       /* neat trick to allow the content to be an attribute of the tag*/
                background: #757575;
                color: white !important;
                padding: 4px 20px;
                border-radius: 5px;
                margin-left: 110px;
                margin-top: -50px;  /* How far it sits above the td element*/
                text-decoration: none;    
                width: 5%;
                -ms-word-break: break-all;
                word-break: break-all;

    Thursday, April 5, 2018 4:18 AM