Sunday, 27 January 2013 13:56

how to show tips when clicked using jquery and qtip

Written by 
Rate this item
(0 votes)

it's needed to show nice tips through out the web page.basically
you will show tips in a basic popup on a html element click.it
will also show nice arrow pointing to where the click arised -

for this download qtip javascript file from qtip website and
add that script reference in page.jquery script reference also needed -

at first i created some global styles for the qtip below -

function pageLoad() {
$.fn.qtip.styles.myCreatedstyle = { // Last part is the name of the style
width: 200,
height: 40,
padding: 5,
background: 'buttonface',
color: 'black',
textAlign: 'center',
border: {
width: 0.3,
radius: 4,
color: '#3278f9'
},
tip: { position: 'topLeft', show: true },
name: 'dark' // Inherit the rest of the attributes from the preset dark style} })
}


//then the tip is shown when a html button clicked

$("#htmlbutton").qtip({
content: 'my first tip shown',
show: 'click',
style: 'myCreatedstyle'
});

};

Read 1732 times
Super User

Email This email address is being protected from spambots. You need JavaScript enabled to view it.
Login to post comments