I want to use Qtip2 to display a persistent tool tip. By persistent I mean that the tool tip should be shown when the page is loading and then it should neither be hidden nor destroyed for the lifetime of the page. I have tried the solution here but it did not work for me. In my code which you can refer it at jsFiddle here, the tool tip is still hidden when the target is moused over. I want this behavior to be off so that the tool tip stays in place.
for your reference,to help me,code:
<html>
<head>
<link href="http://craigsworks.com/projects/qtip_new/packages/nightly/jquery.qtip.css" rel="stylesheet" />
<link href="mycss2.css" rel="stylesheet" />
<style>
#demo-simple{
margin:100px;
border:1px red Solid;
}
</style>
</head>
<body>
<div id="demo-simple" class="box">
<div id="primary">
Hello World
</div>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="http://craigsworks.com/projects/qtip_new/packages/nightly/jquery.qtip.js" ></script>
<script type="text/javascript">
$(document).ready(function () {
$("#primary").qtip({
content: {
text: 'I am primary'
},
show: {
ready: false,
delay: 0
},
hide: {
when: false
},
position: {
my: 'right center',
at: 'left center',
target: $('#primary')
},
});
$("#primary").qtip('show');
});
</script>
</body>
This will make the tooltip permanent upon page load. JsFiddle here.
$("#primary").qtip({
content: {
text: 'I am primary'
},
show: {
ready: true,
delay: 0
},
hide: false,
position: {
my: 'right center',
at: 'left center',
target: $('#primary')
},
});