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'
});

};