I have created a HTML table which has a function written in javascript that takes the value of the cursors position within a large table cell and then prints the value into a cell.
How would i go about printing the value in a tooltip instead of a table cell?
The simplest thing to do is to set the "title" attribute of some element.
element.title = "Something to show in a tooltip";
There are fancy Javascript tools to make fancy tooltips. You don't say where you want the tooltip, so it's not 100% clear what you're trying to accomplish.
you can go showing the cell content in a tooltip by something like this
jQuery.fn.applyTooltip = function(options) {
var settings = $.extend({}, options);
return this.each(function() {
var ReqElemPosition = $(this).offset();
$(this).hover(function() {
$('body').append('<div class="tooltip"></div>');
tooltip = $('.tooltip');
tooltip.empty().append($(this).text());
tooltip.fadeIn('fast').css({
top: ReqElemPosition.top + tooltip.height() * 2 - $('body').offset().top,
left: ReqElemPosition.left - ($('body').offset().left - $(this).offset().left)
});
}, function() {
tooltip.fadeOut('fast', function() {
$(this).remove();
});
});
});
};
$(document).ready(function() {
$('td').applyTooltip();
});
Related
So right now, I can dynamically create elements (2 rows of 12 blocks) and when I click on an individual block, I can change the color of it as well.
However, I am having one problem. When I click on a block to have its color changed, the color picker will pop up beside it, no issues at all. When I add a new set of rows and try to color the same block number, it will replace the color of the block from the previous row.
For example, if I color the 12th block in the first row, then add 2 new sets of rows and click on the same block in the second set, it will act as if I'm clicking on the previous set's block. I am using https://bgrins.github.io/spectrum/ as my colorPicker
Here is a link to what I have done so far:
http://codepen.io/anon/pen/bwBRmw
var id_num = 1;
var picker = null;
$(function () {
$(document).on('click', ".repeat", function (e) {
e.preventDefault();
var $self = $(this);
var $parent = $self.parent();
if($self.hasClass("add-bottom")){
$parent.after($parent.clone(true).attr("id", "repeatable" + id_num));
id_num = id_num + 1;
//picker = null;
} else {
$parent.before($parent.clone(true).attr("id", "repeatable" + id_num));
id_num = id_num + 1;
//picker = null;
}
});
});
$(".container").on("click", "a", function(e) {
var self = this;
console.log(this.id)
console.log(this)
$(self).spectrum({
color: "#f00",
change: function(color) {
$(self).css('background-color',color.toHexString());
}
});
e.stopPropagation();
})
The problem seems to be that you are cloning elements which already have the colorpicker events bound.
EDIT: I think I've managed to work around the problem by changing your use of jQuery's clone(). If you tell it to clone without including events (omitting the first parameter to clone() which defaults to false, the DOM objects will be created without the colorpicker pointing at the old ones.
Here's an example that I think is doing what you are looking for. I've just removed the true params for clone(). No changes to HTML or CSS.
I have many different queried field data returning various height and lenghts from a database to multiple variables that are mapped to its own textarea on a web page for display. I need a way to have each textarea auto-fit the data according to its size returned.
Currently I use a javascript function(data-autoresize) for each textarea to allow users to expand the text when the fields are larger than the textarea:
i.e.
$(document).ready(function () {
jQuery.each(jQuery('textarea[data-autoresize]'), function () {
var offset = this.offsetHeight - this.clientHeight;
var resizeTextarea = function (el) {
jQuery(el).css('height', 'auto').css('height', el.scrollHeight + offset);
};
jQuery(this).on('keyup input', function () {
resizeTextarea(this);
}).removeAttr('data-autoresize');
});
});
<textarea title="If needed, hit ENTER to expand this text area." class="textExpand" readOnly="true" data-autoresize rows="10"> **returnDataFieldVar1** <textarea>
This is useful for users to expand manually after data is loaded and too large for the default textarea size of 10 rows. But to make this more efficient and functional, it would be preferred to have each textarea auto-fit to the data that was returned from the query and eliminate users having to manually expand the textareas on the webpage. Any pointers or code examples on how to do this is appreciated!
You looking for something like this?
$(window).on('resize', function(e) {
$('textarea[data-autoresize]').each(function() {
var $textarea = $(this);
$textarea.css('height', 'auto');
$textarea.css('height', $textarea.prop('scrollHeight') + 'px');
});
})
$('textarea[data-autoresize]').each(function() {
$(this).on('keyup input change paste propertychange', function(e) {
var $textarea = $(this);
$textarea.css('height', 'auto');
$textarea.css('height', $textarea.prop('scrollHeight') + 'px');
});
});
https://jsfiddle.net/ff0xjm4q/
On any change set the height to the scrollHeight.
Also handle it on window resize as well since there is no textarea resize event.
I am making charts using c3.js. I have to make the contents of the tooltip cilckable. Till now, the tooltip is visible only when i hover over the chart. I have some Information which is to be displayed when i click on a link in the tooltip. I couldn't find any help from c3 documentation. Snippet of the code i am working on is shown below.
$scope.timelineConfig.tooltip.contents = function (data, defaultTitleFormat, defaultValueFormat, color) {
var $$ = this, config = $$.config,
titleFormat = config.tooltip_format_title || defaultTitleFormat,
nameFormat = config.tooltip_format_name || function (name) { return name; },
valueFormat = config.tooltip_format_value || defaultValueFormat,
text, i, title, value;
text = "<div id='tooltip' class='d3-tip'>";
title = dates[data[0].index];
text += "<span class='info'><b><u>Date</u></b></span><br>";
text += "<span class='info'>"+ title +"</span><br>";
text += "<span class='info'><b><u>Features</u> : </b> " + features[data[0].index] + "</span><br>";
text += "<span class='info'><b><u>Enhancements</u> : </b> " + defects[data[0].index] + "</span><br>";
text += "</div>";
return text;
};
I have to make the contents (<span><b><u>Features...</u></b></span>) clickable.
First (if you haven't already done so) override the tooltip position so that it doesn't keep running away when you try to click it.
tooltip: {
position: function () {
var position = c3.chart.internal.fn.tooltipPosition.apply(this, arguments);
position.top = 0;
return position;
},
Then you need to override the hideTooltip function so that it doesn't close before your click event can be detected.
var originalHideTooltip = chart.internal.hideTooltip
chart.internal.hideTooltip = function () {
setTimeout(originalHideTooltip, 100)
};
Then, you just need to override the pointer-events style (so that the mouse events are not ignored) and then attach the handler as you normally would in jQuery
$(".c3-tooltip-container")
.css("pointer-events", "auto")
.on('click', '.info:eq(2)', function () {
// add click functionality here. you could pass in additional data using the span attributes
alert($(this).text())
})
Modify the selector as required (like adding the chart wrapper id...)
Fiddle - http://jsfiddle.net/5vbeb4k8/
I know I'm commenting on an old question, but just for reference in case anyone else needs it, I modified the above answer to work for my code.
In my CSS:
.c3-tooltip-container {
pointer-events: auto !important;
}
In JS:
c3.chart.internal.fn.hideTooltip = function () {
setTimeout(c3.chart.internal.fn.hideTooltip, 100);
};
The position code seems to be optional. But the fixed top is probably more user-friendly.
tooltip: {
position: function () {
var position = c3.chart.internal.fn.tooltipPosition.apply(this, arguments);
position.top = 0;
return position;
},
Thanks #potatopeelings for getting me started with this -- it was a huge help.
I am building a WYSIWYG rich text editor.
When the user selects a portion of his/her text, I would like to present a menu in a tooltip. Presenting the menu works fine but I would like to only show it if the user hovers over the selected text.
As Illustrated:
I also haven't decided on positioning (I like the way that it's illustrated) but to clarify, that's not the point of the question.
The question is: How do I filter for a hover event that happens over selected text?
The Problems:
I can't just listen for a text selection event or test hover events to see whether they are over elements that have selected text inside them. The left image would generate a false positive with that.
I know how to get the selected text but I don't know how to get the selected region.
To my mind, the ideal solution is somehow to calculate the region of the selected text and test whether mouseover events happen in that region.
On mouseup, use Range.getClientRects to grab the bounding rectangles of each line of the selection.
You can then test if the mouse is over the selection like this:
var cr= [];
$(document).on({
'mouseup': function() {
cr= window.getSelection().getRangeAt(0).getClientRects();
},
'mousemove': function(ev) {
//hide the pop up
for(var i = 0 ; i < cr.length ; i++) {
if(ev.pageX >= cr[i].left && ev.pageX <= cr[i].right &&
ev.pageY >= cr[i].top && ev.pageY <= cr[i].bottom
) {
//show the pop up
break;
}
}
}
});
Fiddle
Try this way:
JS
$(document).ready(function () {
$(document).on("mouseup", ".conttext", function () {
var highlight = window.getSelection();
console.log(highlight);
var spn = '<span class="highlight">' + highlight + '</span>';
var text = $('.conttext').text();
$('.conttext').html(text.replace(highlight, spn));
});
$(document).on("mouseover", ".highlight", function () {
alert("You hovered on selected tex"); // Your tooltip code goes here
})
});
CSS:
.highlight {
color:#888;
position:relative;/*This will not matter if you inject tooltip using JS*/
display:inline-block;/*This will not matter if you inject tooltip using JS*/
}
HTML:
<div class="conttext">Sample text</div>
Demo: http://jsfiddle.net/lotusgodkk/BGKSN/202/
I am making a page in which you select sandwich toppings with checkboxes, and after you click submit those sandwich option divs containing images will show. By default they are all hidden. I want the first div that is shows to be fixed while the rest of the toppings layer on top of the first one. I'll eventually set it up so that while you scroll down, the toppings appear to move up and over the previous topping. So, if you select bagel-bottom and bacon, you scroll down to see a bagel bottom and keep scrolling for the bacon to move up on top of the bagel bottom.
The first topping div in the HTML order is bagel-bottom, but even though I select "bacon" the only div that shows is bagel-bottom.
I have the jsfiddle here: http://jsfiddle.net/3kgnkh4w/
$(document).ready(function() {
$('#sandwich-option-submit').click(function() {
var checkedTopping = $('.sandwich-option').val();
var divCheckedTopping = $('#'+ checkedTopping);
var optionsContainer = $('#sandwich-selection-container');
if($('.sandwich-option').is(':checked')) {
$(divCheckedTopping).show().addClass('display');
$(divCheckedTopping).eq(0).addClass('first-checked-topping');
} else {
$(divCheckedTopping).hide();
};
});
});
The jQuery class selector returns an array of all objects within that class, so you need to check all of them. Here is the fixed jQuery:
$(document).ready(function() {
$('#sandwich-option-submit').on("click", function() {
var checkedToppings = $('.sandwich-option');
for(var i = 0; i < checkedToppings.length; i++){
var checkedTopping = $(checkedToppings[i]);
var checkedToppingVal = $(checkedTopping).val();
var divCheckedTopping = $('#' + checkedToppingVal);
var optionsContainer = $('#sandwich-selection-container');
if($(checkedTopping).is(':checked')) {
$(divCheckedTopping).show().addClass('display');
$(divCheckedTopping).eq(0).addClass('first-checked-topping');
} else {
$(divCheckedTopping).hide();
}
}
});
});
Alternatively, you can have each topping shown on check, using the toggle() jQuery function which toggles between the hide() and show() method. Here is the code for that:
$(document).ready(function() {
$('.sandwich-option').on("click", function() {
var checkedToppingVal = $(this).val();
var divCheckedTopping = $('#' + checkedToppingVal);
$(divCheckedTopping).toggle();
});
});
You can then remove the submit buttton.