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>';
}
}
});
Related
If I have a list of "simple" cards that is rendered using ng-repeat,
what would be the recommended way to do a transition to a detailed view of one of those cards?
Does such a transition imply that the same HTML / DOM element needs to stay on screen and its content needs to change?
Does such a transition imply that the collection upon which ng-repeat is based needs to change so that it only includes that single item that we are transitioning to or does the rendering of the rest of the items should use some version of ng-if="item.id=focused_item_id"?
It doesn't need to be the same DOM element, and arguably shouldn't be. Animating width or height will cause repaints/reflows and will greatly hinder performance.
You could use ng-animate (https://docs.angularjs.org/api/ngAnimate) with a single detail element that gets populated with the relevant details from whatever object was clicked.
Something like this:
HTML
<div class="item" ng-repeat="el in elems track by $index" ng-click="getDetails(el)">
<div>Summary</div>
</div>
<div class="details" ng-if="showDetails">
<div>Details for {{currentItem}}</div>
</div>
CSS
.details {
position: fixed;
width: 100%;
transition: all 1s ease-out;
}
.details.ng-enter,
.details.ng-leave-active {
opacity: 0;
transform: scale(0.8);
}
.details.ng-enter-active,
.details.ng-leave {
opacity: 1;
transform: scale(1);
}
So getDetails() would do something like set $scope.showDetails = true; and set $scope.currentItem = el; Then you could have a close button that resets those two scope variables and destroys the detail element.
Hope that helps!
I have done what you are describing using CSS transitions on the DOM element in question. I have a list of elements, and when you click on one, the backing object has an 'expand' property set to true, which makes extra content visible and adjusts the size.
HTML
<div ng-repeat="el in elems" ng-class="{expand: el.expand}" class="element">
<div ng-click="el.expand = !el.expand">Summary</div>
<div ng-if="el.expand">Details</div>
</div>
CSS
div.element {
transition: 0.5s linear all;
height: 200px;
}
div.element.expand {
height: 500px;
}
Try clicking on 'Summary 1' or 'Summary 2' in the plunkr
https://plnkr.co/cDkuNjTbE83L5bDJccsJ
I want that each label in Blogger have a different color. I tried to create a class to each label, for example, add a class ".Movies" to label Movies and class named ".News" to label News. But I don't know what to do next.
Here's my current code that affects all labels:
<div class='tl-label-post'><div class='postags'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != "true"'/>
</b:loop>
</b:if>
</div> </div></div>
Thank you, guys!
Already dit it!
Keep the default CSS and HTML code of labels intact, and instead of changing it, do this for each label:
a[href^="http://www.YOURSITE.com/search/label/CINEMA"] {
color: #colorcode !important;
background: #colorcode !important;
}
You can see I've added the entire label path for Cinema. Similarly,
take full path of all labels and add different color rules for each
label
For example, let's say one more label name is 'Television'.
You can add one more rule like this:
a[href^="http://www.YOURSITE.com/search/label/TELEVISION"] {
color: #colorcode !important;
background: #colorcode !important;
}
Color and background can be of your choice. Make sure you keep the
!important directive intact.
This is likely a very simple question that I am brainfarting on - Is there a way to have my shop with the Luna theme show an actual numerical quantity available rather than the simple bars?
I'm certain I have seen this done somewhere but I can't find an example of the code anywhere.
To show the quantity in your inventory bar area, head to Customize Design > Advanced > CSS and add this at the very bottom:
#product_inventory .bar span em {
display: block;
}
I know this question is old but I have changed the following in the Luna theme.css file to provide this functionality as the first answer no longer works.
Edit the css to replace display: none with display: block
.inventory-bars .inventory-label {
color: {{ theme.secondary_text_color }};
font-size: 12px;
display: block;
position: absolute;
right: 0;
top: -16px;
}
Numerical quality shown
[bigcartel]
I'm trying to change the default color for my title, which is white at the moment.
<nav class = "top-bar" data-topbar>
<ul class = "title-area">
<li class = "name">
<h1><%= link_to "CF logo", root_path, class: "home"%></h1>
</li>
</ul>
</nav>
I tried calling
.name h1{
color:red;
}
and
.title-area .name h1{
color:red;
}
even
.home{
font-size: 1.5em;
font-color: red;
}
but none of them works. What can I do?
If your title is inside of an anchor tag <a> - you'll want something like this:
.top-bar .name a { color: #9dcf81; }
Inside Chrome, after you inspect your element, look for the plus symbol once you highlight your title with a mouse click. Consider using the !important attribute if the color doesn't stick.
p.s. - Please provide a link with a URL Shortening service (if your concerned about privacy) to your site.
Whether or not a CSS rule is used is dependent on the selectors specificity. See the MDN for details on how specificity for a CSS selector is calculated.
If you want to see which CSS statement is overriding your one (presumably one of the styles specified in the Foundation CSS library that you are using), then I would recommend a tool like firebug or chrome developer tools which allow you to inspect an element and see which rules are being taken into account and which are being overridden by more specific selectors.
You can also use important! inside a selector to override the specificity, however use this with caution. So for example:-
.name h1 {
color:red !important;
}
I am quite new to zurb, infact just found it yesterday. I am liking it so far, but I can't seem to figure out something simple. I can do this using css but I wanted to know if there is another out-of-the-box approach to this.
I want to be able to set the width and height of a text area. The way it is on this fiddle.
http://jsfiddle.net/bwZbh/
`<textarea id="content" placeholder="Nothing yet!!" class="large-12" style="margin: 0px -275.672px 0px 0px; height: 319px; width: 580px;"
it's a small bug in foundation
open up your css, and add the following
textarea {
height: auto;
}
then you will be able to style your textarea as you wish, and rows will work as well
example
<textarea rows="5" name="textareaname" cols="50"></textarea>
UPDATE:
This bug is now fixed in Foundation 5