The first image is default tooltip. I want to produce the second image:
.
This is the default options:
tooltipTemplate: "<%if (label){%><%=label %>: <%}%><%= value %>",
multiTooltipTemplate: "<%= value %>"
When I change the second option (multiTooltipTemplate) same as first option, I got this:
.
You have to use datasetLabel key to access curves label. Still it wont change text color.
multiTooltipTemplate: "<%= datasetLabel + ' ' + value %>"
Related
I have tried to make the labels for both datasets in the chart.js found here.
example of chart.js to appear when hovering over the different days in the chart
I have tried to add this...
options: {
tooltips: {
mode: 'index',
intersect: false
},
hover: {
mode: 'index',
intersect: false
}
}
Bu that does not help, in a perfect world I would like to display it like 28 (30) when hovering over SUNDAY. Can somebody help out please?
Since you dont use the build in tooltip to display those values setting tooltip modes dont matter.
To get what you want just put the values in the same span the way you like so you would get this:
<div class="tick">
SUN
<span class="value value--this">28 (30)</span>
</div>
https://codepen.io/leelenaleee/pen/OJjOamw
I am working on the below demo. Why am I not able to add id sample to the object? I am trying to control the element style through css but it is not working
var paper = Raphael("container", 500, 300);
var dot = paper.circle(50, 50, 30).attr({
stroke: "#000",
"stroke-width": 5
}).data("id", "sample");
#sample{
fill:red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<div id="container"></div>
The problem is data() doesn't refer to svg attributes on an element, but custom data on a Raphael element, that it can access.
If you want to set the id attribute, you would need to try one of the following...
set the 'id' within the attr({}) definition you are using (however, iirc some versions of Raphael don't work with that), if not you would need to do
dot.attr({ 'id', 'sample' }); // or try the following
dot.node.setAttribute('id', 'sample'); // or
dot.node.id = 'sample';
I can't figure out how to do some stuff with the components, ie:
This is an example of a working rendered progress bar from the dom:
<div class="progress-bar bg-color-teal" aria-valuetransitiongoal="25" aria-valuenow="25" style="width: 25%;">25%</div>
This is what I get in the dom, rendered from the component (never mind the values of attributes):
<div id="ember294" class="ember-view progress-bar bg-color-teal" aria-valuetransitiongoal="77" aria-valuenow="77" width="25">
25%
</div>
Difference and problem: the style attribute that holds a width attribute.
And the component.js:
App.ProgBarComponent = Ember.Component.extend({
classNames: ['progress-bar', 'bg-color-teal'],
attributeBindings: ['aria-valuetransitiongoal:aria-valuetransitiongoal', 'aria-valuenow:aria-valuenow', 'percent:width'],
didInsertElement: function () {
//$('#' + this.elementId).css('width', this.get('percent') + '%');
}
});
But I cant bind the width in %, based on the percent attribute, to the style attribute.
Now, the didinsertelement hook works (I mean setting the width), but I want to do (and learn) how to do this with a normal approach - just like binding the aria-values and percent.
Setting the width to percent does not work - either because it is not in the style attribute, or because it is not in percent. How could I bind an attribute with the following logic (or similar):
attributeBindings: ['someString:style'],
//someString: 'width:' + this.get('percent') + '%'
//someString: 'width:' + ['percent'] + '%'
//someString: 'width:' + percent + '%'
Neither of the commented lines work : the first one errors undefined is not a function (for get), the second one sets the width to "percent%", and the third one errors 'percent is not defined'...
The only workaround I could think of is using the routes model to return extra data, basically adding a new attribute:
styleString = 'width: ' + percent + '%';
Your attempts to define someString didn’t work because they’re set when the component is defined, rather than at runtime. Change it to a computed property:
someString: function() {
return "width: " + this.get('percent') + "%";
}.property('percent')
That defines someString as a property that depends on the value of percent. When percent changes, so does someString.
Foundation default tooltips look like this:
I'd like to get rid of the small top triangle on parts of my website.
To get rid of it everywhere you just have to change the $tooltip-pip-size variable value to 0 from the foundation_and_overrides.scss file (also called _settings.scss if you're not using the foundation gem with rails).
Is it possible to define a custom version of the foundation tooltip without a pip?
EDIT
The difficulty here is that when I write something like
<span data-tooltip class="has-tip tip-bottom" title="Here are my tooltip contents!">extended information</span>
Foundation javascript generates a specific element at the end of the document containing the actual tooltip:
<span data-selector="tooltip8vxaud6lxr" class="tooltip tip-bottom" style="visibility: visible; display: none; top: 78px; bottom: auto; left: 50px; right: auto; width: auto;">Here are my tooltip contents!<span class="nub"></span></span>
You see that the tip-bottom class I added to the first span got copied to the second but that is only the case for foundation specific classes like tip-left, tip-right and so on.
What I would like to do is being able to add a "no-pip" class to the first span (the only one I actually write) and be able to alter the look of the generated span containing a "nub" element.
<span data-tooltip class="has-tip tip-bottom no-pip" title="Here are my tooltip contents!">extended information</span>
Just hide it by setting display property to none
.tooltip > .nub {
display: none;
}
that little triangle is just span with class nub all what you need to do is to remove the css border from it then you 'll have your tool tip in the same location as normal without the little triangle
With foundation version 5 you can customize the tooltip template.
Just remove the <span class="nub"></span>:
$(document).foundation({
tooltip: {
tip_template : function (selector, content) {
return '<span data-selector="' + selector + '" class="'
+ Foundation.libs.tooltip.settings.tooltip_class.substring(1)
+ '">' + content + '<span class="nub"></span></span>';
}
}
});
UPDATE Jade v0.24.0 fixes this with a != syntax for attributes. option(value!='<%= id %>')
I'm trying to build an <option> with jade, where the value of the option is an UnderscoreJS template marker: <%= id %> but I can't get it to work because jade is converting my marker text to <= id >.
Here's my Jade markup:
script(id="my-template", type="text/template")
select(id="type")
<% _.each(deviceTypes, function(type){ %>
option(value='<%= type.id %>') <%= type.name %>
<% }) %>
I expect it to produce this html:
<script id="my-template" type="text/template">
<select id='type'>
<% _.each(deviceTypes, function(type){ %>
<option value="<%= type.id %>"> <%= type.name %> </option>
<% }) %>
</select>
</script>
But what I get instead, is this:
<script id="my-template" type="text/template">
<select id='type'>
<% _.each(deviceTypes, function(type){ %>
<option value="<%= type.id %>"> <%= type.name %> </option>
<% }) %>
</select>
</script>
Note the very subtle difference in the <option> line of the output... the value attribute of the option has been HTML encoded.
How do I prevent Jade from HTML encoding this value? I need it to produce the literal value, the same way it does with the text of the option.
Derick has already mentioned that Jade added new feature for unescape HTML encoding in update, but I'd like to add some addendum for someone who might not recognize.
- var html = "<script></script>"
| !{html} <-- Escaped
| #{html} <-- Encoded
from https://github.com/visionmedia/jade
This feature has been added to Jade. You simply use the != operator if you want to unescape attribute values:
script#my-template(type='text/template')
a(href!='<%= url =>') Clicky clicky...
As of this writing I don't believe there's a way to it. See this issue:
https://github.com/visionmedia/jade/issues/198
I ended up dropping into raw HTML to solve it, using the | prefix.
So I was having an issue similar to this, where I wanted to create an Underscore template inside one of my Jade views. A piece of the Underscore template needed to set the selected attribute in an <option> tag.
Initially I tried having Underscore return "selected" or "". Unfortunately, Jade doesn't have a way to display an attribute with no value and doesn't have a way of non-escaping attribute names (the Underscore bits were coming back without quotation marks).
Luckily, you are able to unescape the value of an attribute, preserving the quotation marks.
In this example, I'm selecting a value of a dropdown based on the owner type matching a string value. I set a helper function so I wouldn't have to manually escape quotation marks.
- var checkType = function(type) { return "<%= contact.type == '" + type + "' %>" };
.clearfix
label Title:
.input
select(type="text", name="contact[title]", class="new-title")
option(value="") Choose Title
option(value="manager", selected="#{ checkType('manager') }") Manager
option(value="member", selected="#{ checkType('member') }") Member
option(value="owner", selected="#{ checkType('owner') }") Owner
option(value="president", selected="#{ checkType('president') }") President
option(value="individual", selected="#{ checkType('individual') }") Individual
option(value="main_contact", selected="#{ checkType('main_contact') }") Main Contact
According to some, you should be able to use !{} here to completely avoid all encoding (<, >, etc.), however this did not work on my version of Jade. I'm using "^0.30" and the current version is 1.x.
If someone can verify that !{} does work in this situation using the latest version of Jade, I'll update my answer.