Skip to content

Instantly share code, notes, and snippets.

@gto76

gto76/tip.html

Created April 14, 2018 19:46
Show Gist options
  • Save gto76/3038f3172c2f49e1f4ee409601ab6c20 to your computer and use it in GitHub Desktop.
Save gto76/3038f3172c2f49e1f4ee409601ab6c20 to your computer and use it in GitHub Desktop.
Download ZIP
Draws a tip bubble using JS
Raw
tip.html
<html>
<head>
<script src="d3.v3.min.js" charset="utf-8"></script>
<style>
.bkgrnd {
fill-opacity: 0.5
}
.temp-text {
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<script>
var RECT_WIDTH = 200
var RECT_HEIGHT = 100
var TRIANGLE_WIDTH = 30
var TRIANGLE_HEIGHT = 50
var ROUNDNES = 10
var TEXT_MARGIN = 16
var TEXT_INFO_1 = "Click on the icon to"
var TEXT_INFO_2 = "play audio sample."
var TEXT_CONFIRM = "GOT IT"
var group = d3.select('body')
.append("svg")
.attr("width", 1000)
.attr("height", 1000)
.append("g")
.attr("class", "main_group")
.attr("transform", "translate(500, 350)")
group.append('polygon')
.attr("class", "bkgrnd")
.attr("points", "0,0 "+-(TRIANGLE_WIDTH/2)+","+-TRIANGLE_HEIGHT+" "+(TRIANGLE_WIDTH/2)+","+-TRIANGLE_HEIGHT)
group.append('rect')
.attr("class", "bkgrnd")
.attr("rx", ROUNDNES)
.attr("ry", ROUNDNES)
.attr("x", -(RECT_WIDTH/2))
.attr("y", -(RECT_HEIGHT+TRIANGLE_HEIGHT))
.attr("height", RECT_HEIGHT)
.attr("width", RECT_WIDTH)
group.append("text")
.attr("class", "temp-text")
.attr("y", -(TRIANGLE_HEIGHT+RECT_HEIGHT*0.77))
.attr("fill", 'white')
.attr("fill-opacity", 0.88)
.attr("font-size", RECT_HEIGHT * 0.2)
.attr("alignment-baseline", "middle")
.attr("text-anchor", "middle")
.text(TEXT_INFO_1)
group.append("text")
.attr("class", "temp-text")
.attr("y", -(TRIANGLE_HEIGHT+RECT_HEIGHT*0.54))
.attr("fill", 'white')
.attr("fill-opacity", 0.88)
.attr("font-size", RECT_HEIGHT * 0.2)
.attr("alignment-baseline", "middle")
.attr("text-anchor", "middle")
.text(TEXT_INFO_2)
group.append("text")
.attr("class", "temp-text")
.attr("x", RECT_WIDTH/2 - TEXT_MARGIN)
.attr("y", -(TRIANGLE_HEIGHT+RECT_HEIGHT/5))
.attr("font-weight", "bold")
.attr("text-decoration", "underline")
.attr("fill", 'MediumBlue')
.attr("fill-opacity", 1)
.attr("font-size", RECT_HEIGHT * 0.15)
.attr("alignment-baseline", "middle")
.attr("text-anchor", "end")
.text(TEXT_CONFIRM)
.on("click", function(song) { group.attr("visibility", "hidden") })
.on({
"mouseover": function(d) {
d3.select(this).style("cursor", "pointer");
},
"mouseout": function(d) {
d3.select(this).style("cursor", "default");
}
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment