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/>
<canvasid="canvas"class="interactive"></canvas>
<p>
What you should see: Ten colored circles with different tooltips.
</p>
<scriptclass="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ß.',
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.',
