<!doctype html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>PIXI Tooltip</title> <link rel="stylesheet" href="../3rdparty/highlight/styles/default.css"> <link rel="stylesheet" href="../../css/doctest.css"> <script src="../3rdparty/highlight/highlight.pack.js"></script> <script src="../../dist/iwmlib.3rdparty.js"></script> <script src="../../dist/iwmlib.js"></script> <script src="../../dist/iwmlib.pixi.js"></script> </head> <body onload="Doctest.run()"> <h1>Tooltip</h1> <p> The tooltip or infotip or a hint is a common graphical user interface element. It is used in conjunction with a cursor, usually a pointer. The user hovers the pointer over an item, without clicking it, and a tooltip may appear—a small "hover box" with information about the item being hovered over.[1][2] Tooltips do not usually appear on mobile operating systems, because there is no cursor (though tooltips may be displayed when using a mouse). </p> <p>Let's look at some tooltip examples:</p><br /> <canvas id="canvas" class="interactive"></canvas> <p> What you should see: Ten colored circles with different tooltips. </p> <script class="doctest"> const app = new PIXIApp({ view: canvas, width: 900, height: 250 }).setup().run() const circle1 = new PIXI.Graphics() circle1.beginFill(0x5251a3) circle1.drawCircle(50, 50, 40) const circle2 = new PIXI.Graphics() circle2.beginFill(0x8ca351) circle2.drawCircle(150, 50, 40) const circle3 = new PIXI.Graphics() circle3.beginFill(0xbda038) circle3.drawCircle(250, 50, 40) const circle4 = new PIXI.Graphics() circle4.beginFill(0xae4a4a) circle4.drawCircle(350, 50, 40) const circle5 = new PIXI.Graphics() circle5.beginFill(0xa64f94) circle5.drawCircle(450, 50, 40) const circle6 = new PIXI.Graphics() circle6.beginFill(0x6b6acf) circle6.drawCircle(50, 150, 40) const circle7 = new PIXI.Graphics() circle7.beginFill(0xb5d16a) circle7.drawCircle(150, 150, 40) const circle8 = new PIXI.Graphics() circle8.beginFill(0xe7bc51) circle8.drawCircle(250, 150, 40) const circle9 = new PIXI.Graphics() circle9.beginFill(0xd7626c) circle9.drawCircle(350, 150, 40) const circle10 = new PIXI.Graphics() circle10.beginFill(0xcf6bbd) circle10.drawCircle(450, 150, 40) let tooltip1 = new Tooltip({ object: circle1, container: app.scene, content: 'Das Gesetz ist der Freund des Schwachen.' }) let tooltip2 = new Tooltip({ object: circle2, content: 'Sieh vorwärts, Werner, und nicht hinter dich!' }) let tooltip3 = new Tooltip({ object: circle3, container: app.scene, padding: 20, content: 'Es reden und träumen die Menschen viel\nVon bessern künftigen Tagen,\nNach einem glücklichen goldenen Ziel\nSieht man sie rennen und jagen.' }) let tooltip4 = new Tooltip({ object: circle4, container: app.scene, content: 'Stets ist die Sprache kecker als die Tat.', textStyle: {fill: 0x5251a3, fontSize: 20}, fill: 0xa64f94, fillAlpha: .8 }) let tooltip5 = new Tooltip({ object: circle5, container: app.scene, content: 'Hier gilt es, Schütze, deine Kunst zu zeigen:\nDas Ziel ist würdig, und der Preis ist groß.', fillAlpha: 0, strokeAlpha: 0, offsetLeft: -160, offsetTop: 100, delay: 3, textStyle: {fill: 0x5251a3, fontSize: 20, stroke: 0xeeeeee, strokeThickness: 2} }) app.loadSprites([ './assets/tooltip-1.jpg', './assets/tooltip-2.jpg' ], sprites => { let sprite1 = sprites.get('./assets/tooltip-1.jpg') sprite1.scale.set(.33, .33) let tooltip6 = new Tooltip({ object: circle6, container: app.scene, content: sprite1 }) let sprite2 = sprites.get('./assets/tooltip-2.jpg') sprite2.scale.set(.33, .33) let tooltip7 = new Tooltip({ object: circle7, container: app.scene, padding: 0, content: sprite2, fillAlpha: 0, strokeAlpha: 0 }) let tooltip8 = new Tooltip({ object: circle8, container: app.scene, padding: 8, fill: 0xe7bc51, fillAlpha: .7, content: 'Es reden und träumen die Menschen viel\nVon bessern künftigen Tagen,\nNach einem glücklichen goldenen Ziel\nSieht man sie rennen und jagen.', textStyle: {lineHeight: 22, fontSize: 18, fill: ['#843d39','#ae4a4a', '#d7626c'], fontStyle: 'italic'} }) let texture1 = PIXI.Texture.from('./assets/tooltip-3.mp4') texture1.baseTexture.on('loaded', e => { let sprite3 = new PIXI.Sprite(texture1) sprite3.scale.set(.15, .15) let tooltip9 = new Tooltip({ object: circle9, container: app.scene, content: sprite3, offsetTop: 100, offsetLeft: 30 }) let sprite4 = new PIXI.Sprite(texture1) sprite4.scale.set(.1, .1) let tooltip10 = new Tooltip({ object: circle10, container: app.scene, content: sprite4, offsetTop: 100, offsetLeft: -100, padding: 1 }) }) }, {resolutionDependent: false}) app.scene.addChild(circle1, circle2, circle3, circle4, circle5) app.scene.addChild(circle6, circle7, circle8, circle9, circle10) </script> </body>