I have a bootstrap popover that I cannot seem to get to show up inside the element I am calling it on, next to my mouse. I have searched far and wide through the popper.js documentation and have tried using the 'offset' modifier, as well as adjusting just about every other parameter I could think of, in different configurations, but it seems no matter what I do the popover stubbornly wants to be positioned towards one of its four string directions and won't show up inside the element I am calling it on, next to my current cursor position.
Here's an example to give you an idea of what I have tried. Again, I am trying to have the popover popup positioned next to where my mouse click occurs, within a large div.
$(".a_large_div").click(function(e) {
var relX = e.pageX - parentOffset.left;
var relY = e.pageY - parentOffset.top;
var height = $('.popover').height();
$(this).popover({
placement: 'top',
offset:'-'+(relX + 1000)+'px,-'+(relY)+'px',
title: 'My Popover',
html:true,
trigger: 'manual',
modifiers: {
flip: { enabled: false },
inner: { order: 700, enabled: true },
applyStyle: { order: 900, enabled: true, fn: (data, options) =>
{
data.styles.left = "1000px";
console.log(data, options);
return data;
}
},
offset: { order: 0, enabled: true, offset: '-'+(relX + 1000)+'px,-'+(relY)+'px' },
},
boundary: this,
content: function() {return $("#my_popover_content").html();},
delay: 100
}).on('show.bs.popover', function() {
// execute some code
}).on('shown.bs.popover', function() {
// execute some code
}).on('inserted.bs.popover', function() {
Object.assign($('.popover')[0].style,{left:""+relX+"px !important",top:""+relY+"px !important"});
}).on('hidden.bs.popover', function() {
// execute some code
}).on('hide.bs.popover', function() {
// execute some code
});
$(this).popover('toggle');
$('.popover').css('left', (relX) + 'px');
$('.popover').css('top', (relY) + 'px');
I have tried all these different positioning methods but to no avail, it seems the 'placement' modifier overrides all of them and Im not sure at what point during the popper.js update process I would be able to override it's positioning. Thanks in advance for all your help.
Looking back on this question, I can see that this was a classic case of ‘doing too much’, where I just have way too much going on such that isolating a specific functionality in order to build and test was challenging.
Figured I’d circle back and answer this since I have since figured out that this is a relatively straightforward problem.
Popover can be given position absolute and can be positioned on click by assigning 'left' and 'top' css values offered by the x and y coordinates of the click event object’s metadata.
var data=[
{"x":10,"y":10,"height":100},
{"x":120,"y":10,"height":120},
{"x":230,"y":10,"height":150},
{"x":340,"y":10,"height":180},
{"x":450,"y":10,"height":200}
];
var bar = d3.select("#barchart").append("svg")
.attr("width",1000)
.attr("height",250)
.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("x",function(d){return d.x })
.attr("y",function(d){return 250 - d.height})
.attr("width",90)
.attr("height",0)
.on('click', function() {
var left = d3.mouse(this)[0];
var top = d3.mouse(this)[1];
var theHeight = $('.popover').height();
$('.popover').show();
$('.popover').css('left',(left+10)+'px');
$('.popover').css('top', (top-(theHeight/2)-10)+'px');
})
.style("fill","blue")
.transition()
.duration(4000)
.attr("height",function(d){return(d.height)});
.popover {
position:absolute;
display:none;
background:#fff;
border: 1px solid #999;
padding:10px;
width:auto;
box-shadow:0 0 10px rgba(0, 0, 0, .5);
}
.popover:after, .popover:before {
right: 100%;
border: solid transparent;
content:" ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.popover:after {
border-color: rgba(255, 255, 255, 0);
border-right-color: #ffffff;
border-width: 10px;
top: 50%;
margin-top: -10px;
}
.popover:before {
border-color: rgba(201, 201, 201, 0);
border-right-color: #c9c9c9;
border-width: 11px;
top: 50%;
margin-top: -11px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
<div id="barchart"></div>
<div class="popover">
<p>hello world</p>
</div>
https://codepen.io/modularmoon/pen/gOLooeb
Related
I'm here to get answers to why my javascript isn't working for the follow button because I add all cdn and scripts but still not working. What am I doing wrong in my code?
$(document).ready(function(){
$("#follow-button").click(function(){
if ($("#follow-button").text() == "+ Follow"){
// *** State Change: To Following ***
// We want the button to squish (or shrink) by 10px as a reaction to the click and for it to last 100ms
$("#follow-button").animate({ width: '-=10px' }, 100, 'easeInCubic', function () {});
// then now we want the button to expand out to it's full state
// The left translation is to keep the button centred with it's longer width
$("#follow-button").animate({ width: '+=45px', left: '-=15px' }, 600, 'easeInOutBack', function () {
$("#follow-button").css("color", "#fff");
$("#follow-button").text("Following");
// Animate the background transition from white to green. Using JQuery Color
$("#follow-button").animate({
backgroundColor: "#2EB82E",
borderColor: "#2EB82E"
}, 1000 );
});
}else{
// *** State Change: Unfollow ***
// Change the button back to it's original state
$("#follow-button").animate({ width: '-=25px', left: '+=15px' }, 600, 'easeInOutBack', function () {
$("#follow-button").text("+ Follow");
$("#follow-button").css("color", "#3399FF");
$("#follow-button").css("background-color", "#ffffff");
$("#follow-button").css("border-color", "#3399FF");
});
}
});
});
#follow-button {
color: #3399FF;
font-family: "Helvetica";
font-size: 10pt;
background-color: #ffffff;
border: 1px solid;
border-color: #3399FF;
border-radius: 3px;
width: 85px;
height: 30px;
position: absolute;
top: 50px;
left: 50px;
cursor: hand;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="follow-button"> Follow</button>
Is there a solution to fix this type of error? I tried google but no answers. I thought you guys could help.
Thanks for all the help!
Some issues in your codes:
easeInOutBack is not defined, so uses built-in easing function=linear or swing instead
$("#follow-button").css("color", "#fff"); will cause text and background are same color, so uses #2EB82E instead.
You can check the details for JQuery animate().
After fix them, the codes will be like below:
$(document).ready(function(){
$("#follow-button").click(function(){
if ($("#follow-button").text() == "+ Follow"){
// *** State Change: To Following ***
// We want the button to squish (or shrink) by 10px as a reaction to the click and for it to last 100ms
$("#follow-button").animate({ width: '-=10px' }, 100, 'linear', function () {});
// then now we want the button to expand out to it's full state
// The left translation is to keep the button centred with it's longer width
$("#follow-button").animate({ width: '+=45px', left: '-=15px' }, 600, 'linear', function () {
$("#follow-button").css("color", "#2EB82E");
$("#follow-button").text("Following");
// Animate the background transition from white to green. Using JQuery Color
$("#follow-button").animate({
backgroundColor: "#2EB82E",
borderColor: "#2EB82E"
}, 1000 );
});
}else{
// *** State Change: Unfollow ***
// Change the button back to it's original state
$("#follow-button").animate({ width: '-=25px', left: '+=15px' }, 600, 'linear', function () {
$("#follow-button").text("+ Follow");
$("#follow-button").css("color", "#3399FF");
$("#follow-button").css("background-color", "#ffffff");
$("#follow-button").css("border-color", "#3399FF");
});
}
});
});
#follow-button {
color: #3399FF;
font-family: "Helvetica";
font-size: 10pt;
background-color: #ffffff;
border: 1px solid;
border-color: #3399FF;
border-radius: 3px;
width: 85px;
height: 30px;
position: absolute;
top: 50px;
left: 50px;
cursor: hand;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="follow-button"> Follow</button>
You need to use jQuery's html() function, as text() doesn't do what you think it should do - http://api.jquery.com/text/
$("#follow-button").html("Following");
if ($("#follow-button").text() == "+ Follow")
You're comparing the button text with "+ Follow" yet your button text is just "Follow" so your if block will never run.
Also see Adam's answer for the correct way to get/set the contents of your button.
The easings you are using are not defined, and that is why you are getting the error.
Please check jQuery Easings Main Page for more info.
I have fixed your error, but I guess your code still needs some improvements style and coloring wise.
$(document).ready(function(){
$("#follow-button").click(function(){
if ($("#follow-button").text() == "+ Follow"){
// *** State Change: To Following ***
// We want the button to squish (or shrink) by 10px as a reaction to the click and for it to last 100ms
$("#follow-button").animate({ width: '-=10px' }, 100, 'linear', function () {});
// then now we want the button to expand out to it's full state
// The left translation is to keep the button centred with it's longer width
$("#follow-button").animate({ width: '+=45px', left: '-=15px' }, 600, 'linear', function () {
$("#follow-button").css("color", "#fff");
$("#follow-button").text("Following");
// Animate the background transition from white to green. Using JQuery Color
$("#follow-button").animate({
backgroundColor: "#2EB82E",
borderColor: "#2EB82E"
}, 1000 );
});
}
else{
// *** State Change: Unfollow ***
// Change the button back to it's original state
$("#follow-button").animate({
width: '-=25px',
left: '+=15px'
}, 600, 'linear', function () {
$("#follow-button").text("+ Follow");
$("#follow-button").css("color", "#3399FF");
$("#follow-button").css("background-color", "#ffffff");
$("#follow-button").css("border-color", "#3399FF");
});
}
});
});
#follow-button {
color: #3399FF;
font-family: "Helvetica";
font-size: 10pt;
background-color: #ffffff;
border: 1px solid;
border-color: #3399FF;
border-radius: 3px;
width: 85px;
height: 30px;
position: absolute;
top: 50px;
left: 50px;
cursor: hand;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="follow-button"> Follow</button>
I am devoloping a calendar web app using fullcalendar.I wanted to imitate the google calendar to display information about an event and a delete button when it is clicked.I tried doing this :
element.bind('mousedown', function (e) {
if(e.which == 1){
var Xcord = e.clientX ;
var Ycord = e.clientY ;
var X = 'left+' + Xcord.toString() ;
var Y = 'top+' + Ycord.toString() ;
console.log(X) ;
console.log(Y) ;
var start = moment(event.start)
var end = moment(event.end)
//The contents of the dialog box is the start time and end time ...
$('#Info').html(start.format('ddd') + " " + start.format('MMM DD') + " " + start.format('hh:mm a') + " - " + end.format('hh:mm a')).css( 'font' , '15px arial, sans-serif');
console.log(X+' '+Y);
//I expected the box to open at given coordinates but it is not doing so !!!
$('#dialog').dialog({
position: { my: "center bottom", at: X+' '+Y }
});
//More code here ...
However the dialog box is not opening at the given co-ordianates.It always opens at a fixed position (slightly left of center ) on the screen whereas I want it to open just above the calendar event where the user has clicked.
Is there anything wrong with the approach?
Also is there a better method to do this. Since even if it works , if I scroll down the calendar, the dialog box will no longer be attached to the event even. It will fixed to the screen at the mentioned coordinates.
Here is the part of the html and css :
<div id="dialog" title="Basic dialog" style="display: none;">
<p id = 'Info'></p>
<button type="button" id = 'deleteEvent'> Delete</button>
</div>
And the CSS :
<style type="text/css">
.ui-resizable-handle.ui-resizable-s::before, .ui-resizable-handle.ui-resizable-s::after {
content: "";
width: 0;
height: 0;
position: absolute;
left: 150px;
border-style: solid;
border-width: 10px;
}
.ui-resizable-handle.ui-resizable-s::before {
border-color: #aaa transparent transparent transparent;
top: 2px;
}
.ui-resizable-handle.ui-resizable-s::after {
border-color: #fff transparent transparent transparent;
top: 1px;
}
.ui-dialog {
overflow:visible;
}
.ui-dialog-title {
display:none;
}
.ui-dialog-titlebar {
background:transparent;
border:none;
}
.ui-dialog .ui-dialog-titlebar-close {
right:0;
}
I do this using css, this lets you decide where the dialog is generated and will also leave it there when you scroll, first in your css add this class:
(make this however you want it, I use it so my dialog is always in the center of my screen)
.fixed-dialog{
position: fixed;
top: 50px;
left: 50px;
}
Then when you create the dialog, in the modal options put this line:
$("#name").load().dialog(
{ //Set options for the dialog here
dialogClass: 'fixed-dialog'
});
EDIT: if I'm understanding correctly you want to do something like this:
$("#dialog").dialog("option", "position", {
at: "center bottom",
of: this // this refers to the cliked element
}).dialog('open');
I've made a pie chart using Chart.js, and I'd like to detect when a segment is hovered over. I've found plenty of documentation regarding manipulating the tooltips that appear when hovering over segments, but nothing regarding doing something else when a tooltip would appear. Is this possible?
I know this has already been given an accepted answer, and im not sure if this does satisfy your use case but Chart js released an update (maybe a month ago or so) that allowed for custom tooltips. This allows for a custom function to run when a tooltip would normally have been drawn. They have an example in the samples section of git hub
in short you define a custom function
Chart.defaults.global.customTooltips = function(tooltip){//do what you want}
here is the example they give in the samples with an extra bit of text added to an html tooltip. The only annoying thing I see is that don't provide the segment/point/bar that triggered this tooltip which would be really handy as then you could do some thing to the graph knowing this information but you are given the tooltip data which means you can do something with that instead.
Chart.defaults.global.customTooltips = function (tooltip) {
// Tooltip Element
var tooltipEl = $('#chartjs-tooltip');
// Hide if no tooltip
if (!tooltip) {
tooltipEl.css({
opacity: 0
});
return;
}
// Set caret Position
tooltipEl.removeClass('above below');
tooltipEl.addClass(tooltip.yAlign);
// Set Text
tooltipEl.html(tooltip.text+ " anythign custom you want");
// Find Y Location on page
var top;
if (tooltip.yAlign == 'above') {
top = tooltip.y - tooltip.caretHeight - tooltip.caretPadding;
} else {
top = tooltip.y + tooltip.caretHeight + tooltip.caretPadding;
}
// Display, position, and set styles for font
tooltipEl.css({
opacity: 1,
left: tooltip.chart.canvas.offsetLeft + tooltip.x + 'px',
top: tooltip.chart.canvas.offsetTop + top + 'px',
fontFamily: tooltip.fontFamily,
fontSize: tooltip.fontSize,
fontStyle: tooltip.fontStyle,
});
};
var pieData = [{
value: 300,
color: "#F7464A",
highlight: "#FF5A5E",
label: "Red"
}, {
value: 50,
color: "#46BFBD",
highlight: "#5AD3D1",
label: "Green"
}, {
value: 100,
color: "#FDB45C",
highlight: "#FFC870",
label: "Yellow"
}, {
value: 40,
color: "#949FB1",
highlight: "#A8B3C5",
label: "Grey"
}, {
value: 120,
color: "#4D5360",
highlight: "#616774",
label: "Dark Grey"
}];
var ctx1 = document.getElementById("chart-area1").getContext("2d");
window.myPie = new Chart(ctx1).Pie(pieData);
var ctx2 = document.getElementById("chart-area2").getContext("2d");
window.myPie = new Chart(ctx2).Pie(pieData);
#canvas-holder {
width: 100%;
margin-top: 50px;
text-align: center;
}
#chartjs-tooltip {
opacity: 1;
position: absolute;
background: rgba(0, 0, 0, .7);
color: white;
padding: 3px;
border-radius: 3px;
-webkit-transition: all .1s ease;
transition: all .1s ease;
pointer-events: none;
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}
#chartjs-tooltip.below {
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}
#chartjs-tooltip.below:before {
border: solid;
border-color: #111 transparent;
border-color: rgba(0, 0, 0, .8) transparent;
border-width: 0 8px 8px 8px;
bottom: 1em;
content:"";
display: block;
left: 50%;
position: absolute;
z-index: 99;
-webkit-transform: translate(-50%, -100%);
transform: translate(-50%, -100%);
}
#chartjs-tooltip.above {
-webkit-transform: translate(-50%, -100%);
transform: translate(-50%, -100%);
}
#chartjs-tooltip.above:before {
border: solid;
border-color: #111 transparent;
border-color: rgba(0, 0, 0, .8) transparent;
border-width: 8px 8px 0 8px;
bottom: 1em;
content:"";
display: block;
left: 50%;
top: 100%;
position: absolute;
z-index: 99;
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}
<script src="https://raw.githack.com/chartjs/Chart.js/v1.1.1/Chart.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="canvas-holder">
<canvas id="chart-area1" width="50" height="50" />
</div>
<div id="canvas-holder">
<canvas id="chart-area2" width="300" height="300" />
</div>
<div id="chartjs-tooltip"></div>
The way I'm doing it is slightly more simple:
assuming you already have some code defining the canvas like
canvas = document.getElementById("chart"); and your pie chart is
window.myPie. You can use the onmousemove javascript event, or jQuery hover
canvas.onmousemove = function(evt) {
var el = window.myPie.getElementsAtEvent(evt);
//do something with the el object to display other information
//elsewhere on the page
}
In my case highlight a table row based on the value of el[0]._index
No...
There's nothing in the ChartJS API to override or extend the tooltip,
But, a workaround...
You can modify the draw method of the Chart.Tooltip class. This would allow you to "do something else" when the tooltip would normally be rendered by ChartJS.
The draw method you want to tie into starts at line 1351 of the source here:
https://github.com/nnnick/Chart.js/blob/master/src/Chart.Core.js
For v2.0 version:
Chart.defaults.global.hover.onHover = function(x) {
if(x[0]) {
var index = x[0]._index;
// Place here your code
}
};
UPDATE 2020 : For Chartjs 3.5
Here is a quick fix that I used with Chartjs 3.5 to trigger events on hover over Doughnut or Pie parts. It relies on using the existing onHover option :
onHover : (event, activeElements) => {
if (activeElements.length > 0) {
// get active chart element
let elt = activeElements[0];
// retrieve element label
let lbl = elt._model.label;
// Get element value
let elt_index = elt._chart.tooltip._data.labels.indexOf(lbl);
let val = elt._chart.tooltip._data.datasets[0].data[elt_index];
// trigger your event here :
// ex for vuejs : this.$emit('element-hovered', { label : lbl, value : val });
}
else {
// No active elements
}
}
Working fine so far :)
If found a small trick using customTooltip, too. I searched for a solution to get an Event if the user moves with the mouse over a Value and a Tooltip is shown. Mainly i liked to present in a different frame some detail informations besides the raw Plot values.
var options = {
customTooltips: function (tooltip)
{
if (!tooltip) return;
tooltip.custom = false;
tooltip.draw();
OnEntrySelected(tooltip.title);
tooltip.custom = this;
}
}
The custom tooltip is drawn using tooltip.draw(), but this calls the custom method. I set it to false to avoid a recursive loop, call the default behavior and take the data i need for my callback (OnEntrySelected) which is in this case the string of the x-Axis label. This event is triggered whenever the tooltip is shown.
My current tooltips only work on the titles of links, not on the titles of images, fields, or spans - how do I get the tooltips to work on all titles?
Here is the aToolTip JS:
(function($) {
$.fn.aToolTip = function(options) {
/**
setup default settings
*/
var defaults = {
// no need to change/override
closeTipBtn: 'aToolTipCloseBtn',
toolTipId: 'aToolTip',
// ok to override
fixed: true,
clickIt: false,
inSpeed: 200,
outSpeed: 100,
tipContent: '',
toolTipClass: 'defaultTheme',
xOffset: 5,
yOffset: 5,
onShow: null,
onHide: null,
},
// This makes it so the users custom options overrides the default ones
settings = $.extend({}, defaults, options);
return this.each(function() {
var obj = $(this);
/**
Decide weather to use a title attr as the tooltip content
*/
if(obj.attr('title')){
// set the tooltip content/text to be the obj title attribute
var tipContent = obj.attr('title');
} else {
// if no title attribute set it to the tipContent option in settings
var tipContent = settings.tipContent;
}
/**
Build the markup for aToolTip
*/
var buildaToolTip = function(){
$('body').append("<div id='"+settings.toolTipId+"' class='"+settings.toolTipClass+"'><p class='aToolTipContent'>"+tipContent+"</p></div>");
if(tipContent && settings.clickIt){
$('#'+settings.toolTipId+' p.aToolTipContent')
.append("<a id='"+settings.closeTipBtn+"' href='#' alt='close'>close</a>");
}
},
/**
Position aToolTip
*/
positionaToolTip = function(){
$('#'+settings.toolTipId).css({
top: (obj.offset().top - $('#'+settings.toolTipId).outerHeight() - settings.yOffset) + 'px',
left: (obj.offset().left + obj.outerWidth() + settings.xOffset) + 'px'
})
// added delay() call...
.stop().delay(1000).fadeIn(settings.inSpeed, function(){
if ($.isFunction(settings.onShow)){
settings.onShow(obj);
}
});
var $tooltip = $('#' + settings.toolTipId),
$win = $(window),
winLeft = $win.scrollLeft(),
objWidth = obj.outerWidth(),
tipWidth = $tooltip.outerWidth(),
offset = obj.offset(),
ttWidth = $tooltip.outerWidth(),
ttHeight = $tooltip.outerHeight();
$win.width() < (offset.left - winLeft + objWidth + tipWidth + ttWidth) ?
$tooltip //reversed (to left)
.addClass("reversed")
.css({
left: offset.left - winLeft - tipWidth - ttWidth,
top: offset.top - $win.scrollTop() + obj.outerHeight() / 2 + ttHeight
})
:
$tooltip //standard (to right)
.css({
left: offset.left - winLeft + objWidth + ttWidth,
top: offset.top - $win.scrollTop() + obj.outerHeight() / 2 + ttHeight
});
},
/**
Remove aToolTip
*/
removeaToolTip = function(){
// Fade out
$('#'+settings.toolTipId).stop().fadeOut(settings.outSpeed, function(){
$(this).remove();
if($.isFunction(settings.onHide)){
settings.onHide(obj);
}
});
};
/**
Decide what kind of tooltips to display
*/
// Regular aToolTip
if(tipContent && !settings.clickIt){
// Activate on hover
obj.hover(function(){
// remove already existing tooltip
$('#'+settings.toolTipId).remove();
obj.attr({title: ''});
buildaToolTip();
positionaToolTip();
}, function(){
removeaToolTip();
});
}
// Click activated aToolTip
if(tipContent && settings.clickIt){
// Activate on click
obj.click(function(el){
// remove already existing tooltip
$('#'+settings.toolTipId).remove();
obj.attr({title: ''});
buildaToolTip();
positionaToolTip();
// Click to close tooltip
$('#'+settings.closeTipBtn).click(function(){
removeaToolTip();
return false;
});
return false;
});
}
// Follow mouse if enabled
if(!settings.fixed && !settings.clickIt){
obj.mousemove(function(el){
$('#'+settings.toolTipId).css({
top: (el.pageY - $('#'+settings.toolTipId).outerHeight() - settings.yOffset),
left: (el.pageX + settings.xOffset)
});
});
}
}); // END: return this
};
})(jQuery);
Here is the JavaScript in my header that I use to fire it: I tried modified it to try and limit the tool tips to two possible alternates, the pretty tooltip plugin, and a simple "tooltipquestion" class for more detailed tips.
$(function() {
$("a:not(.tooltipquestion)").aToolTip({
closeTipBtn: 'aToolTipCloseBtn',
toolTipId: 'aToolTip',
fixed: false, // Set true to activate fixed position
clickIt: false, // set to true for click activated tooltip
inSpeed: 400, // Speed tooltip fades in --chris/peter 12/9
outSpeed: 400, // Speed tooltip fades out
tipContent: '', // Pass in content or it will use objects 'title' attribute
toolTipClass: 'defaultTheme', // Set class name for custom theme/styles
xOffset: 15, // x position
yOffset: -50, // y position
onShow: null, // callback function that fires after atooltip has shown
onHide: null // callback function that fires after atooltip has faded out
});
});
The CSS for the tooltips is a follows:
#aToolTip {
position: absolute;
display: none;
z-index: 50000;
max-width: 350px;
collision: flipfit flip;
}
#aToolTip .aToolTipContent {
position:relative;
margin:0;
padding:0;
max-width: 350px;
collision: flipfit flip;
}
#aToolTip span {
position: absolute;
display: none;
z-index: 50000;
}
#aToolTip .aToolTipContent span {
position:relative;
margin:0;
padding:0;
}
/*
END: Required Styles
*/
/**
Default Theme
*/
.defaultTheme {
border:2px solid #444;
background:#555;
color:#fff;
margin:0;
padding:6px 12px;
font-family: 'Archivo Narrow', sans-serif;
font-size: 10pt;
-moz-border-radius: 0 12px 12px 12px ;
-webkit-border-radius: 0 12px 12px 12px ;
-khtml-border-radius: 0 12px 12px 12px ;
border-radius: 0 12px 12px 12px ;
/*
-moz-border-radius: 12px 12px 12px 0;
-webkit-border-radius: 12px 12px 12px 0;
-khtml-border-radius: 12px 12px 12px 0;
border-radius: 12px 12px 12px 0;
-moz-border-radius: 6px 6px 6px 0;
-webkit-border-radius: 6px 6px 6px 0;
-khtml-border-radius: 6px 6px 6px 0;
border-radius: 6px 6px 6px 0;
*/
-moz-box-shadow: 2px 2px 5px #111; /* for Firefox 3.5+ */
-webkit-box-shadow: 2px 2px 5px #111; /* for Safari and Chrome */
box-shadow: 2px 2px 5px #111; /* for Safari and Chrome */
}
.defaultTheme #aToolTipCloseBtn {
display:block;
height:18px;
width:18px;
background:url(../images/closeBtn.png) no-repeat;
text-indent:-9999px;
outline:none;
position:absolute;
top:-20px;
right:-30px;
margin:2px;
padding:4px;
}
Here is an example of some HTML that has several tooltips - a working title, a working with class="tooltipquestion", and a non-working title that I would like the jQuery plugin to work on:
<tr>
<td class="checkbox"><input type="checkbox" name="paramId[]" id="paramId[]" /></td>
<td class="open">Biology, lab, meth</td>
<td class="open">Haney, M</td>
<td class="open">Draft</td>
<td class="open">M/C</td>
<td class="action" nowrap="nowrap"><a href="#" class="tooltipquestion" title= "<strong>Plant leaves appear green because they ____ light spectrum. </strong>
<br><b>a.)</b> Scatter all colors except the green portion of the visible.
<br><b>b.)</b> Scatter the green portion of the visible.
<br><b>c.)</b> Absorb the green portion of the visible.
<br><b>d.)</b> Scatter the green portion of the ultraviolet. ">Preview</a></td>
<td class="action" nowrap="nowrap"><img src="Icons/edit-green.gif" alt="Edit Question" title="Edit Question" width="16" height="16" border="0" /> <img src="Icons/delete.png" alt="Delete Question" title="Delete Question" width="16" height="16" border="0" /></td>
</tr>
How do I adjust my code to allow for tooltips to also fire on and titles as well as the already working ?
You need to target the different elements. At the moment you are targeting any anchor that doesnt have this class...
.tooltipquestion
Ideally what you want to do is, for any element you want to have the tooltip applied to, you give it a class
.tooltip
You then initialize the plugin with this class as the target selector...
$('.tooltip').aToolTip();
You then need to give any 'tooltip' elements a title attribute...
<span title="This is a span tag..." class="tooltip">Some text</span>
You then do the same with any other elements.
Maybe this could help you:
$('*[title]').each(function() {
this.aToolTip(...);
});
This code applies for each element that has a title.
Ok I am using a piece of javascript called Captify. It adds a small pop up to images for you with text in. Works great in all browsers accept IE9. IE9 fades everything within the popup div. I have read its a child element issue but I can not fix it. As captify can not be found anywhere online any more I will include all the code for that along with the css below then the code on my page. If anyone could help me stop the fade I would be very grateful as it has coursed me major problems.
Java
jQuery.fn.extend({
captify: function(o){
var o = $.extend({
speedOver: 'fast', // speed of the mouseover effect
speedOut: 'normal', // speed of the mouseout effect
hideDelay: 500, // how long to delay the hiding of the caption after mouseout (ms)
animation: 'fade', // 'fade' or 'slide'
prefix: '', // text/html to be placed at the beginning of every caption
className: 'caption' // the name of the CSS class to apply to the caption box
}, o);
$(this).each(function(){
var img = this;
$(this).load(function(){
$this = img;
if (this.hasInit){
return false;
}
this.hasInit = true;
var over_caption = false;
var over_img = false;
//pull the label from another element if there if there is a
//valid element id inside the rel="..." attribute, otherwise,
//just use the text in the title="..." attribute.
var captionLabelSrc = $('#' + $(this).attr('rel'));
var captionLabelTitle = !captionLabelSrc.length ? $(this).attr('title') : captionLabelSrc.html();
var captionLabelHTML = !captionLabelTitle.length ? $(this).attr('alt') : captionLabelTitle;
captionLabelSrc.remove();
var toWrap = this.parent && this.parent.tagName == 'a' ? this.parent : $(this);
var wrapper = toWrap.wrap('<div></div>').parent();
wrapper.css({
overflow: 'hidden',
padding: 0,
fontSize: 0.1
})
wrapper.addClass('caption-wrapper');
wrapper.width($(this).width());
wrapper.height($(this).height());
//transfer the border properties from the image to the wrapper
$.map(['top','right','bottom','left'], function(i){
$.map(['style','width','color'], function(j){
var key = 'border-'+i+'-'+j;
wrapper.css(key, $(img).css(key));
});
});
$(img).css({border: '0 none'});
//transfer the margin properties
$.map(['top','right','bottom','left'], function(t){
var key = 'margin-'+t;
wrapper.css(key, $(img).css(key));
});
//create two consecutive divs, one for the semi-transparent background,
//and other other for the fully-opaque label
var caption = $('div:last', wrapper.append('<div></div>')).addClass(o.className);
var captionContent = $('div:last', wrapper.append('<div></div>')).addClass(o.className).append(o.prefix).append(captionLabelHTML);
//override hiding from CSS, and reset all margins (which could have been inherited)
$('*',wrapper).css({margin: 0}).show();
//ensure the background is on bottom
var captionPositioning = jQuery.browser.msie ? 'static' : 'relative';
caption.css({
zIndex: 1,
position: captionPositioning
});
//clear the backgrounds/borders from the label, and make it fully-opaque
captionContent.css({
position: captionPositioning,
zIndex: 2,
background: 'none',
border: '0 none',
opacity: 1.0
});
caption.width(captionContent.outerWidth());
caption.height(captionContent.outerHeight());
//pull the label up on top of the background
captionContent.css({ 'marginTop': -caption.outerHeight() });
//function to push the caption out of view
var cHide = function(){
if (!over_caption && !over_img)
caption.animate({ marginTop: 0 }, o.speedOut);
};
//when the mouse is over the image
$(this).hover(
function(){
over_img = true;
if (!over_caption) {
caption.animate({
marginTop: -caption.height()
}, o.speedOver);
}
},
function(){
over_img = false;
window.setTimeout(cHide, o.hideDelay);
}
);
//when the mouse is over the caption on top of the image (the caption is a sibling of the image)
$('div', wrapper).hover(
function(){ over_caption = true; },
function(){ over_caption = false; window.setTimeout(cHide, o.hideDelay); }
);
});
//if the image has already loaded (due to being cached), force the load function to be called
if (this.complete || this.naturalWidth > 0){
$(img).trigger('load');
}
});
}
});
Now the CSS for captify
/* caption styling */
.caption {
color: #ffffff;
padding: 0.6em;
font-size: 10px;
display: none;
cursor: default;
/* remove these 4 lines below if you want
the caption to span the whole width of the
image
width: 82%;
/*border-top: 1px solid #303030;
border-right: 1px solid #303030;*/
/* background / transparency */
background: #000000;
opacity: 0.7;
filter: alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
margin-bottom: 5px;
}
.caption a {
border: 0 none;
text-decoration: none;
background: #000000;
padding: 0.3em;
color:#FFFF00;
}
.caption a:hover {
text-decoration:underline;
}
.caption-wrapper {
float: left;
}
br.c { clear: both; }
now my page
<link href="/js/captify/sample.css" rel="stylesheet" type="text/css" /><script type="text/javascript" src="/js/captify/captify.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('img.captify').captify({
// all of these options are... optional
// ---
// speed of the mouseover effect
speedOver: 150,
// speed of the mouseout effect
speedOut: 200,
// how long to delay the hiding of the caption after mouseout (ms)
hideDelay: 100,
// 'fade' or 'slide'
animation: 'fade',
// text/html to be placed at the beginning of every caption
prefix: '',
// the name of the CSS class to apply to the caption box
className: 'caption'
});
});
</script>
<div id="services">
<ul >
<li >
<img src="/images/sports.png" width="169" height="121" class="captify" rel="caption1" />
<div id="caption1"><h4>Watersports</h4>
<p>View all the sports we offer on the lakeside.</p></div>
</li></ul></div>
and the extra css i use
#services {
width: 570px;
margin-top: 370px;
height: 130px;
}
#services ul li {
float: left;
height: 128px;
width: 184px;
margin-right: 5px;
}
Since IE opacity handling sucks I suggest you ditch all together. For the background, you can use a transparent png(1x1 repeating) to get the same effect. Or if you are using IE only css, you can define the background to use the png for IE only. I think this will save you lots of time trying to get across this issue
Edit: of course do not forget to set opacity to one in the IE css
I know this question is old but someone might find this useful:
I did this in my page;
$('img.captify').captify({
animation: 'always-on',
opacity: '0.7'
});
$('div.caption-bottom').wrapInner('<span class="caption-text"></span>');
And in the style sheet I put this;
.caption-text{position:absolute;}
#Mark King,
thanks it works for me
but i changed absolute to relative instead.
.caption-text{
display:block;
position:relative;
}