Solved

qtip close button appears multiple times

Posted on 2013-12-19
4
332 Views
Last Modified: 2014-01-03
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
0
Comment
Question by:JohnLourdu
  • 2
  • 2
4 Comments
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39731942
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
 

Accepted Solution

by:
JohnLourdu earned 0 total points
ID: 39739666
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
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39739678
All I see is a small grey square box to the right.   What am I looking for?
0
 

Author Closing Comment

by:JohnLourdu
ID: 39753378
This solves my issue
0

Featured Post

MIM Survival Guide for Service Desk Managers

Major incidents can send mastered service desk processes into disorder. Systems and tools produce the data needed to resolve these incidents, but your challenge is getting that information to the right people fast. Check out the Survival Guide and begin bringing order to chaos.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

WHY MVC is the future technology... As many of you know, MVC is Model,View,Controller pattern. Model View Controller pattern was invented in a Smalltalk context at Xerox in late 1970s. Why is this buzz about MVC: --------------------------- …
Batch, VBS, and scripts in general are incredibly useful for repetitive tasks.  Some tasks can take a while to complete and it can be annoying to check back only to discover that your script finished 5 minutes ago.  Some scripts may complete nearly …
Learn the basics of while and for loops in Python.  while loops are used for testing while, or until, a condition is met: The structure of a while loop is as follows:     while <condition>:         do something         repeate: The break statement m…
In this fourth video of the Xpdf series, we discuss and demonstrate the PDFinfo utility, which retrieves the contents of a PDF's Info Dictionary, as well as some other information, including the page count. We show how to isolate the page count in a…

828 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question