Solved

qtip close button appears multiple times

Posted on 2013-12-19
4
339 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

The Orion Papers

Are you interested in becoming an AWS Certified Solutions Architect?

Discover a new interactive way of training for the exam.

Question has a verified solution.

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

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Read about why website design really matters in today's demanding market.
Learn the basics of if, else, and elif statements in Python 2.7. Use "if" statements to test a specified condition.: The structure of an if statement is as follows: (CODE) Use "else" statements to allow the execution of an alternative, if the …
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…

631 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