locked
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

    Timerange

    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

    ep.

    and code

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

     https://www.c-sharpcorner.com/UploadFile/092589/implementing-modal-pop-up-in-mvc-application/ 

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

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

    https://www.w3schools.com/css/css_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
                            });
                            $docoAnchor.append($toolSpan);

    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;
                font-size:0.9em;
                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;
                z-index:1;
            }  

    Thursday, April 5, 2018 4:18 AM