I am using Zurb-foundation 5 Joyride for a tour guide. It has been pretty helpful. I have a div split into few vertical divs. I was trying to display an info for each vertical div but those tips are coming at the bottom/ top instead of coming at right/ left.
demo
http://codepen.io/chetang/full/pAvmf/
The docs aren't clear on how to achieve it. Any suggestions!!
You will need to define the location patterns in joyride before using them as shown below.
$(document).foundation({
joyride : {
tip_location: 'top',
nub_position: 'auto',
tip_location_patterns : {
top: ['top'],
bottom: [], // bottom should not need to be repositioned
left: ['right', 'top', 'bottom'],
right: ['left', 'top', 'bottom']
},
}
});
For more clarity Visit http://codepen.io/Parteek/pen/ohHlc.
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
Is there a away to add an extra label at the bottom if a pie graph like this:
Yes, you can do it as follows:
options: {
legend: {
display: true,
title: {
display: true,
text: 'Custom Chart Title',
position: 'bottom'
}
}
You can also find some more details on the official documentation, here:
Chart JS Legend Official Documentation
I am using Doughnut chart of chart.js in a react js application. I would need the same look and feel for the legend than illustrated by:.
I have gone through the Chart.js documentation but I am helpless!
You have to add this at options, see next:
options: {
legend: {
display: true,
position: 'bottom',
labels: {
boxWidth: 10
}
}
}
https://www.chartjs.org/docs/latest/configuration/legend.html#legend-label-configuration here you can see all options what you can add to labels, see padding also, default is 10 you need only add boxWidth.
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>';
}
}
});
i need to get this little gray rectangle (red circle) to be displayed both on top n bottom of a div that coitains thumbnails (btw this div might aswell cointain 2 or 3 rows of thumbnails)
Picture:
here is my code for how it looks atm:
.jq_thumbnails {
background: url("/site_media/static/coffee_small_top.png") top left no-repeat;
overflow: auto;
height: 100%;
}
Is it possible to achieve this effect easily? I thought of making ifequal tag that would check the length of thumbnails list and use a certain background picture accordingly, but maybe it is possible to achieve this using html/css only?
You can leverage CSS3 Multiple Background Images:
.jq_thumbnails {
background-image: url(../images/bg-top.png), url(../images/bg-bottom.png);
background-position: 0 0, 0 bottom;
}
Set the background-repeat property to suit your particular scenario:
background-repeat: repeat-x, repeat-x;
This is supported in all current versions of the major browsers:
Of course you can make an outer div and an inner one that covers the background, so you can repeat-y the background ;)