code.zip (95.3 KB)
I want to add a cross ( X ) at the top right corner of the tooltip. What changes do I require in my code ?
code attached.
1 Like
Hi,
It looks to me as though that is a hover tooltip so there would be no point adding an (X) as you would not be able to click it because the tip disappears before you get to it (unless I am mistaken).
You could add the (X) using aftre but I;m not sure what good it will do.
.qtip:after{
content:"x";
position:absolute;
width:20px;
height:20px;
right:-8px;
top:-8px;
font-size:14px;
border-radius:50%;
line-height:20px;
text-align:center;
background:red;
}
I suppose you might need it for mobile if its just staying hovered.
I’ll remove hover and want to close that using Cross.
Does your code work that way ?
My plan : I would show the tooltip when page loads and then will give user a Cross to close them manually .
It depends on how you are going to code this. If you are just going to make the whole box clickable so that it closes then you can use my method above to show the (x) but if you want only the (X) to be clickable then you will need to add an actual element in the tooltip html so that it can be clicked.
Yes. I am actually looking for that only. I want when user clicks that …my tooltip will be closed
This will be used in IE & Desktop only- no mobile
Does qtip support clicking and adding of html? Have you checked the documentation?
You have it working on hover as I said above which means you can’t click it. Do you have a click demo?
Looking at this page it seems that there are options to add close buttons automatically.
You have it working on hover as I said above which means you can’t click it.
I would remove hover.
it seems that there are options to add close buttons automatically.
Yes …it seems …they have a close.
unfortunately I don’t see any sample code there to check with
Yes its there on this page.
Here is the button added and working on click.
$(document).ready(function(){
$('#addORPCee').qtip({
content: {
text: 'Please press ADD after selecting the student name',
button: 'Close'
},
style: {
classes: 'qtip-tipsy'
},
show: 'click',
hide: 'click'
});
});
Tested your code. This works …thanks…
But you know Cross is not placed at the right place…its looking bad.
See …where I want the cross to be placed …Is it possible here ?
The close is positioned with the ‘qtip-close’ class. It’s currently set at a default of -9px as follows:
.qtip-close {
right: -9px;
top: -9px;
}
Just change the right and top to zero (or whatever you want). Rather than changing (and breaking) the original files just add it as an over-ride in your main css that follows the qtip css.
Use your web developer tools to highlight the tooltip and you can soon see what classes are being applied and it becomes relatively easy to modify them.
Just change the right and top to zero
here is the modified code …
<!DOCTYPE html>
<html>
<head>
<style>
.qtip-close {
right: 0;
top: 0;
}
</style>
<script src="jquery.js"></script>
<link rel="stylesheet" type="text/css"
href="jquery.qtip.css" />
<script type='text/javascript'
src="jquery.qtip.min.js"></script>
<script>
/*$(document).ready(function(){
alert("hello");
$('#addORPCee').qtip( {content: 'Please press ADD after selecting the student name'
, style: { classes: 'qtip-tipsy'}
}).qtip('show');
});*/
$(document).ready(function(){
$('#addORPCee').qtip({
content: {
text: 'Please press ADD after selecting the student name',
button: 'Close'
},
style: {
classes: 'qtip-tipsy'
},
show: 'click',
hide: 'click'
});
});
</script>
</head>
<body>
<table>
<tr>
<td style="width:20px;">
<input id="addORPCee" type="button" value="Add" />
</td>
</tr>
</table>
</body>
</html>
This looks as below …
This is not working. What am I missing here ?
Put your custom CSS AFTER you call the qtip CSS. THEIR CSS is overriding yours since yours is called first.
wonderful. This is working as expected.
Here is my modified code …
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<link rel="stylesheet" type="text/css"
href="jquery.qtip.css" />
<style>
.qtip-close {
right: 0;
top: 0;
}
</style>
<script type='text/javascript'
src="jquery.qtip.min.js"></script>
<script>
$(document).ready(function(){
$('#addORPCee').qtip({
content: {
text: 'Please press ADD after selecting the student name',
button: 'Close'
},
style: {
classes: 'qtip-tipsy'
},
show: 'click',
hide: 'click'
});
});
</script>
</head>
<body>
<table>
<tr>
<td style="width:20px;">
<input id="addORPCee" type="button" value="Add" />
</td>
</tr>
</table>
</body>
</html>
Happy 
Thanks
Ye that’s what I said
If you don’t repeat yourself at least once, does it really count as saying it?
1 Like
I would like to put this tooltip in a show/hide div.
I want to have this feature as below…
suppose I open the tooltip in the div.
Now,
when I hide the div …tooltip wont be visible
Then
when I show the div …tooltip would be visible
is it possible ?
It’s hard to give an accurate answer because the question is a little ambiguous but I;m guessing you mean something like this.
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<link rel="stylesheet" type="text/css"
href="jquery.qtip.css" />
<style>
.qtip-close {
right: 0;
top: 0;
}
.togglewrap{
marrgin:10px;
border:1px solid #000;
padding:10px;
background:#f9f9f9;
display:none;
}
.toggle{
color:blue;
display:inline-block;
margin:80px 0 0;
cursor:pointer;
}
</style>
<script type='text/javascript'
src="jquery.qtip.min.js"></script>
<script>
$(document).ready(function(){
$('#addORPCee').qtip({
content: {
text: 'Please press ADD after selecting the student name',
button: 'Close'
},
style: {
classes: 'qtip-tipsy'
},
position: {
container: $('.togglewrap')
},
show: 'click',
hide: 'click'
});
$( "body" ).on( "click", ".toggle", function() {
$(this).prev('.togglewrap').fadeToggle();
});
});
</script>
</head>
<body>
<div class="togglewrap">
<table>
<tr>
<td style="width:20px;"><input id="addORPCee" type="button" value="Add" /></td>
</tr>
</table>
</div>
<div class="toggle">Click here to toggle div on and off</div>
</body>
</html>
Thanks Paul…I’ll check that.
I wish there had been a link like “Copy Code to Clipboard” in this site.
I was trying to copy your code …but Its so hard .to copy.
Is there any shortcut way to do that ?
Not that I know of.
I have no trouble copying the code above. I just highlight with the mouse (left click and drag or use the wheel button) and then when all highlighted right click and copy. I do it hundreds of times a day here on the forums and never really have an issue with it.
If you are having trouble with the “dragging” (sometimes I do with extremely long posts) this works
On the post click Reply
In the composer click quote
right-click select all
right-click copy
in composer click cancel
modal abandon
1 Like