Solved

qtip close button appears multiple times

Posted on 2013-12-19
4
336 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
4 Comments
 
LVL 53

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 53

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

Why You Need a DevOps Toolchain

IT needs to deliver services with more agility and velocity. IT must roll out application features and innovations faster to keep up with customer demands, which is where a DevOps toolchain steps in. View the infographic to see why you need a DevOps toolchain.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Embedding Tags in a restricted UI 6 59
Renaming with batch file 9 108
Find Files older than 6 months and then ZIP the Files 4 38
Copy files and run psex to windows 7 only 14 51
I hope you'll find this tutorial useful and interesting. So let's try to extend Tcl with a new package.  For anyone more deeply interested please check out the book "Practical Programming in Tcl and Tk". It's really one of the best written books abo…
Recently I spent hours debugging an issue in a Rails project where ActiveRecord was causing MySQL errors trying to create a User object of a class at the top level of a Single Table Inheritance model structure.  It turns out `.create` behaves differ…
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 …

751 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