PDA

View Full Version : Adding an Image to a Panel Header



jbeaven
22 Oct 2013, 7:14 AM
Hey all,

This is a really simple question but I can't find the information anywhere as it seems that most people want to add buttons or something.

I need to add an image (just a little info icon) to a header so when the user rolls over it there's an explanation of what the panel is there for.

I would just use the "Help" tool for it but we've used that as a button throughout the app and I want to maintain consistency so I'm looking for how to add just an image and a tooltip/qtip but I don't know how.

Any suggestions?

willigogs
22 Oct 2013, 8:55 AM
Have you thought about actually utilizing the tools object, but applying your own ID - and then styling this as required?
e.g:


tools:[{
id:'helptooltip',
qtip: 'Here is some tooltip text'
}]


And then in the DOM, the tool element will be given a style of ".x-tool-helptoolip" which you could style with whichever background icon, etc, you like?

jbeaven
22 Oct 2013, 9:04 AM
That's what I initially tried and it seemed to be that I was getting the wrong image placed by default. I just retried the code (cause I'm willing to try anything at this point) and that does seem to handle what I'm looking for if I can get the CSS to work out...my image is just blank.

willigogs
23 Oct 2013, 1:56 AM
Here's an example:
http://jsfiddle.net/Whinters/84VD3/

jbeaven
23 Oct 2013, 5:19 AM
Awesome. Thanks for the help. I knew it couldn't be as difficult as I was making it.