<!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><a href="../index.html">lib.</a><a href="index.html">pixi.</a>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: 0.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(0.33, 0.33)
let tooltip6 = new Tooltip({
object: circle6,
container: app.scene,
content: sprite1
})
let sprite2 = sprites.get('./assets/tooltip-2.jpg')
sprite2.scale.set(0.33, 0.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: 0.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(0.15, 0.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(0.1, 0.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>
</html>