I'm able to dynamically update the value of title of a canvas but I'm yet to style it so that I can show it as a tooltip. Let me know if it's possible to style a canvas title.
<canvas id="tutorial" title= "styleme" width="150" height="150"></canvas>
If you using Angulr2+ then
<canvas id="tutorial" title= {{styleme}} width="150" height="150"></canvas>
//update the value of "styleme" in .ts, changes will reflect automatically
If you using plain HTML and JavaScript then
const canvas = document.getElementById('tutorial');
canvas.setAttribute('title', 'new title')
Hi, so using tooltips is kinda sketchy... I mean it depends on different stuff.
For example, if you trying to use the bootstrap variety of a tooltip it has some limitations like the type of component (button or link), the version of bootstrap, or if you are trying to add emphasis tag (html) to the tooltip:
<button type="button" class="btn btn-secondary" data-toggle="tooltip"
data-html="true"
title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
My Tooltip with HTML
</button>
In addition, the canvas tag has a class attribute but that is a whole other "situation" that depends on if you use css or bootstrap. To add more confusion, the canvas tag also has a style attribute that will allow you to add css directly to the tag but this can get out of hand quickly.
I would need to know more about what specifically you want to see to write the code but I will post a snippet on my gist too:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<title>Canvas and Tooltip</title>
<!-- Latest compiled and minified CSS
Bootstrap 4.3.1 -->
<link rel="stylesheet"
href="stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bo…"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous">
</head>
<body>
<div class="wrapper">
<style>
body {
padding-top: 50px;
overflow: hidden;
}
.starter-template {
padding: 5px 5px;
text-align: center;
}
</style>
<div class="container">
<div class="starter-template">
<p class="lead">Canvas</p>
<!-- Just an example see more at
getbootstrap.com/docs/4.3/components/tooltips -->
<a href="#" data-toggle="tooltip" title="Some tooltip text!">
<canvas id="myCanvas" height="150" width="150"
style="border-style:solid;border:1px 1px 1px 1px;">
<script>
// canvas
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
function Circle(x,y,dx,dy,radius){
this.x = x;
this.y = y;
this.dx = dx;
this.dy = dy;
this.radius = radius;
this.draw = function(){
ctx.beginPath();
ctx.arc(this.x,this.y,this.radius,0,2 * Math.PI, false);
ctx.strokeStyle = "#000000";
ctx.stroke();
ctx.fillStyle = "#FF0000";
ctx.fill();
};
this.update = function(){
if (this.x + this.radius > 150 || this.x - this.radius < 0) {
this.dx = -this.dx;
}
if (this.y + this.radius > 150 || this.y - this.radius < 0) {
this.dy = -this.dy;
}
this.x += this.dx;
this.y += this.dy;
this.draw();
};
}
var circleArray = [];
for(var i =0; i < 25; i++){
var radius = 5;
var x = Math.random() * (150 - radius * 2) + radius;
var y = Math.random() * (150 - radius * 2) + radius;
var dx = (Math.random() - 0.5);
var dy = (Math.random() - 0.5);
circleArray.push(new Circle(x, y, dy, dx, radius));
}
function animate(){
requestAnimationFrame(animate);
ctx.clearRect(0, 0, 150, 150);
for(var i = 0; i < circleArray.length; i++){
circleArray[i].update();
}
circle.update();
}
animate();
</script>
</canvas>
</a>
<!-- Generated markup by the plugin -->
<div class="tooltip bs-tooltip-top" role="tooltip">
<div class="arrow"></div>
<div class="tooltip-inner">
Some tooltip text!
</div>
</div>
</div>
</div>
<!-- /.container -->
<!-- jQuery library -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/u…"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/boo…"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
</body>
</html>
Kee
Avi
patel shraddha
Software Developer @iFour Technolab Pvt Ltd
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;"> Your browser does not support the canvas element. </canvas>