qtip close button appears multiple times

I have using qitp 2.0 for one of my project.
I have customized close button in tool tip.
Some times tool-tip entry close button appears multiple times.
Please help how to solve this issue!.
I have attached screenshot for your reference.
HTML:
<a class="yellow" title="&lt;b&gt;Title:&lt;/b&gt; summary text."><span class="bold">cell membrane</span></a>

Open in new window

CSS:
.yellow {
white-space:nowrap;
cursor:pointer;
color: #15806b;
font-weight: bold;
text-decoration: none;
}

.myCustomClassWithBgPNG {
width: 16px;
height: 16px;
position: relative;
left: 95%;
top: -10px;
background-image: url("images/unit5_close.png") !important;
background-position: center !important;
background-repeat: no-repeat !important;
}

Open in new window

JS:
$('.yellow').qtip({content: {attr: 'title', title: {button: $('<div/>', { 'class': 'myCustomClassWithBgPNG' })}}, style: {classes: 'qtip-dark qtip-shadow'}, show: {event: 'click'}, hide: 'unfocus', position: {my: 'bottom center', at: 'top center'}});

Open in new window

screenshot1.png
JohnLourduAsked:
Who is Participating?
 
JohnLourduConnect With a Mentor Author Commented:
Thanks for your quick help. I have sort out the things here!

Yes this is because the options object have pass through is shared by all the different qTip's that are generated!

And therefore, so is the button element. We can get around this by using .each(), causing a new DOM element to be created for each tooltip's close button.

See here:
http://jsfiddle.net/9hLfL/1/
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Please provide a link to your sample page.  We can't see what is going on from an image.  Or please update this fiddle http://jsfiddle.net/yZLLP/1/ include full urls to your images.
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
All I see is a small grey square box to the right.   What am I looking for?
0
 
JohnLourduAuthor Commented:
This solves my issue
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.