Hi,

I am facing some canvas related problem. I have create canvas at run time to draw a simple horizantal line. And also set tooltip to that canvas. code will execute well and when arrow move on line, display which is also fine. but the problem is around also getting tooltip around the area. Beause i have set width and hight for canvas. I dont want dislpay pop up when on other place. should only display tooltip on line. I have attached My project goal. Please check it. Also help how to draw traingle withing rectangle.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DynamicCanvas.aspx.cs" Inherits="DSN.DynamicCanvas" %>

<!DOCTYPE html>

<head runat="server">
    <title></title>

  <style>

      .ex {
     width: 150px;
    padding: 15px;
    border: 1px solid black;
    margin: 0px;
    border-collapse:inherit;
    text-align:left;
}

.ex1 {
   width: 80px;
    padding: 20px;
    border: 1px solid black;
    margin: 0px;
    text-align:left;
    padding-right: 25px;    
}


       .tooltip {
    display:none;
    position:absolute;
    border:1px solid #333;
    background-color:#161616;
    border-radius:5px;
    padding:10px;
    color:#fff;
    font-size:12px Arial;
}

       .triangle-right {
     width: 0;
     height: 0; 
     border-top: 5px solid transparent;
     border-left: 10px solid black;
     border-bottom: 10px solid transparent; 

}

  </style>

       <script src="//code.jquery.com/jquery-1.10.2.js"></script>

    <script src="Scripts/jquery-1.10.2.js"></script>
<script type="application/javascript">
    $(document).ready(function () {

        putCanvs();


        // Tooltip only Text
        $('.masterTooltip').hover(function () {
            // Hover over code
            var title = "Hi this is shrikant";//$(this).attr('title');
            //$(this).data('tipText', title).removeAttr('title');
            $('<p class="tooltip"></p>')
            .text(title)
            .appendTo('body')
            .fadeIn('slow');
        }, function () {
            // Hover out code
            $(this).attr('title', $(this).data('tipText'));
            $('.tooltip').remove();
        }).mousemove(function (e) {
            var mousex = e.pageX + 20; //Get X coordinates
            var mousey = e.pageY + 10; //Get Y coordinates
            $('.tooltip')
            .css({ top: mousey, left: mousex })
        });
    });


    function makePlot(elem) {
        var ctx = elem.getContext("2d");

   ctx.fillStyle   = '#00f';
   ctx.strokeStyle = 'black';
   ctx.lineWidth = 5;

   ctx.beginPath();
   ctx.moveTo(0,0);
   ctx.moveTo(200, 300);
   ctx.lineTo(300, 300);
   ctx.stroke();
   ctx.closePath();   
}
    function putCanvs() {

        for (var item = 0; item < 1; item++)
        {
            //cc = $(document.body);

            //var div = document.createElement("div");

            var canv = document.createElement("canvas");
            canv.setAttribute('width', 350);
            canv.setAttribute('height', 350);
            canv.setAttribute('id', 'canv' + item);

            //div.appendChild(canv);

            document.body.appendChild(canv);


            var C = document.getElementById(canv.getAttribute('id'));

            if (C.getContext)
            {
                if (C.getContext)
                {
                    makePlot(C);
                }
            }
            $(C).addClass("masterTooltip");
            //$(C).addClass("triangle-right").css({ 'background-color': 'blue', position: 'absolute', left: 300 - 10, top: (300 - 7) });
            //cc.append(div);
        }
    }
</script>
</head>
<body> 
    <form id="form1" runat="server">
    <div>
          <div id="divTbl" >

            <asp:Literal ID="Literal1" runat="server" Visible="false"></asp:Literal>

        </div>
    </div>
    </form>
</body>





using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace DSN
{
    public partial class DynamicCanvas : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                StringBuilder str = new StringBuilder();
                str.Append("<table id=\"abc\" style='border-collapse:collapse;border: 1px solid black;height:100%;width:100%;background-color:white;position:absolute;top:150px;left:100px;'>");
                str.Append("");
                str.Append("<tr id=\"bkc\">");
                str.Append("<b>");
                str.Append("<td>");
                //str.Append("<img id=\"imgDSN\" runat=\"server\" src=\" " + CreateGraph("BTR", mss) + " \" />");
                str.Append("<div class=\"\">");
                str.Append("BTR");
                str.Append("</div>");
                str.Append("</td>");
                str.Append("<td>");
                str.Append("<div class=\"\">");
                str.Append("Pack");
                str.Append("</div>");
                str.Append("</td>");
                str.Append("<td>");
                str.Append("<div class=\"\">");
                str.Append("DC/IHL");
                str.Append("</div>");
                str.Append("</td>");
                str.Append("<td>");
                str.Append("<div class=\"\">");
                str.Append("Seller");
                str.Append("</div>");
                str.Append("</td>");
                str.Append("</tr>");
                str.Append("<tr id=\"bkc\">");
                str.Append("<td>");
                str.Append("<div class=\"ex1\"></div>");
                str.Append("<div class=\"ex\">");
                //str.Append("<img id=\"imgDSN\" runat=\"server\" src=\" " + CreateGraph("Beijing",mss1) + " \" />");
                str.Append("beijing");
                str.Append("</div>");
                str.Append("</td>");
                str.Append("<td id=\"tdChennai\">");
                str.Append("<div class=\"ex1\"></div>");
                str.Append("<div class=\"ex\">");
                str.Append("chennai");
                str.Append("</td>");
                str.Append("<td>");
                str.Append("");
                str.Append("</td>");
                str.Append("<td>");
                str.Append("<div class=\"ex1\"></div>");
                str.Append("<div class=\"ex\">");
                str.Append("APAC");
                str.Append("</div>");
                str.Append("</td>");
                str.Append("</b>");
                str.Append("</tr>");
                str.Append("<tr id=\"bkc\">");
                str.Append("<b>");
                str.Append("<td id=\"arrowId\">");
                str.Append("<div class=\"ex1\"></div>");
                str.Append("<div class=\"ex\">");
                str.Append("Komarom");
                str.Append("</div>");
                str.Append("</td>");
                str.Append("<td id=\"arrowId2\">");
                str.Append("<div class=\"ex1\"></div>");
                str.Append("<div class=\"ex\">");
                str.Append("Reynosa");
                str.Append("</div>");
                str.Append("</td>");
                str.Append("<td>");
                str.Append("<div class=\"ex1\"></div>");
                str.Append("<div class=\"ex\">");
                str.Append("Moscow DC");
                str.Append("</div>");
                str.Append("</td>");
                str.Append("<td>");
                str.Append("<div class=\"ex1\">Russia</div>");
                str.Append("<div class=\"ex\">");
                str.Append("Russia");
                str.Append("</div>");
                str.Append("</td>");
                str.Append("</b>");
                str.Append("</tr>");
                str.Append("</table>");
                //style='position:absolute;top:300px;left:450px'
                Literal1.Text = str.ToString();
            }
        }
    }
}

A shape is drawn directly on the canvas, so I guess the only way is to change your hover method. If it's near the line you should show the tooltip, otherwise remove it. Since you know the position of the line, you can calculate whether the mouse position is near it.

There are tools available such as KineticJS, that help you with the drawing. Some also provide the ability to use tooltips with the drawn shapes.

Hi,

Thanks for replied. Could you please provide css code for triangle within Rectangle with text contents. You can see attached image in previous thread.
Also provide how to add arrow line by using canvas or other way. I have read so websites but couldnt sucessed. That goal implement in simple html,css,javascript. I dont have knowldege about css and javascript. Could you please provide sample code.

Thanks in advance.

Awaiting your reply.

Thanks for replied. Its very nice video. How to append canvas inside html table for line between two columns or two rows which table generate at run time. I have already uploaded code. You can see. Please reply.
Waiting.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.