Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

qtip close button appears multiple times

Posted on 2013-12-19
4
Medium Priority
?
369 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 54

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 54

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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Owning a franchise can be the dream of a lifetime. It provides a chance for economic growth. You can be as successful as you want.  To make your franchise successful, you need to market it successfully. Here are six of the best marketing strategies …
The Windows functions GetTickCount and timeGetTime retrieve the number of milliseconds since the system was started. However, the value is stored in a DWORD, which means that it wraps around to zero every 49.7 days. This article shows how to solve t…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
In this fifth video of the Xpdf series, we discuss and demonstrate the PDFdetach utility, which is able to list and, more importantly, extract attachments that are embedded in PDF files. It does this via a command line interface, making it suitable …
Suggested Courses

916 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