Is there a way to add HTML markup to the tooltip in materialize? I'm trying to arrange some data as definition list inside a tooltip. I tried to add it directly into the data-tooltip attribute but it doesn't seem to recognize the tags.
In materialize.js, around line 1258 make the following change to covert all tooltips to html.
// Change .text()
newTooltip.children('span').text(origin.attr('data-tooltip'));
// To .html()
newTooltip.children('span').html(origin.attr('data-tooltip'));
In the latest version you can use:
$(document).ready(function(){
$('.tooltipped').tooltip({delay: 50, tooltip: 'some text', html: true});
});
See http://materializecss.com/dialogs.html
In Materialize v0.100.2 is possible to use data-html attribute.
If is set data-html="true", then Materialize renders as $(...).html()
So this will be rendered as $(...).text()
<a class="btn tooltipped" data-position="bottom" data-delay="50" data-tooltip="I am a tooltip">Hover me!</a>
And this as $(...).html()
<a class="btn tooltipped" data-html="true" data-position="bottom" data-delay="50" data-tooltip="I am a tooltip">Hover me!</a>
Related
Meteor 1.6.1.1 is the latest version of my project. I am using package ian:accounts-ui-bootstrap-3 instead of accounts-ui. I have added a custom field as <select> in the code.
What I get on Screen is as below.
When I saw the HTML code, it is not adding class="form-control" to select tag.
below is the code when I inspect element on UI using Chrome.
<li id="login-dropdown-list" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Sign in / Join <b class="caret"></b></a>
<div class="dropdown-menu">
<div class="select-dropdown">
<label>State</label><br>
<select id="login-state">
</select>
</div>
<button class="btn btn-primary col-xs-12 col-sm-12" id="login-buttons-password" type="button">
Create
</button>
<button id="back-to-login-link" class="btn btn-default col-xs-12 col-sm-12">Cancel</button>
</div>
</li>
All I want is to add class="form-control" to the select tag dynamically when component loads on screen and it must look like below;
I have tried below code, but it is not working;
Template.HomePage.onRendered(function () {
document.getElementById('login-state').classList.add('form-control');
});
Well, I tried one way to achieve this is by using Template event as below,
Template.HomePage.events({
'click #login-dropdown-list': function(event){
//document.getElementById('login-state').classList.add('form-control');
$('#login-state').addClass('form-control');
}
});
As you can see, the component gets loaded inside the li tag with id="login-dropdown-list". I simply loaded the class on click event. Even the commented code works fine.
Is this a good solution? please let me know if there much better answer to this? If it works I will definitely accept and upvote the answer.
This is my component:
{{#link-to routeName class="list-group-item"}}
<i class="fa {{icon}} fa-fw"></i> {{text}}
{{/link-to}}
Which I use:
<div class="list-group">
{{icon-link routeName="my-account" icon="fa-user" text="Personal details"}}
...
</div>
The expected html is:
<div class="list-group">
<a class="list-group-item" href="xxx">
<i class="fa fa-user fa-fw"></i> Personal details
</a>
...
</div>
But because ember wraps the components in a div, the bootstrap rules do not apply anymore and the list-group has a wrong style.
If I change the component tag to a, and remove link-to from the component template, I loose the flexibility of link-to - and I do not know how to set attributes (href, class) in the containing tag.
It seems I can not use an Ember component for this then? Or is there a way to tellink ember no to wrap my component in a div, or anything else really: in order for the CSS to work, the markup structure must not be modified.
I've not tried this myself but apparently you can create custom link-to components by extending Ember.LinkComponent. Something like this might work...
// app/components/icon-link.js
export default Ember.LinkComponent.extend({
classNames: ["list-group-item"],
icon: null,
text: null,
})
...
// app/templates/components/icon-link.hbs
<i class="fa {{icon}} fa-fw"></i> {{text}}
...
// wherever
{{icon-link 'my-account' icon="fa-user" text="Personal details"}}
Here's a related blog post which may help you also - http://til.hashrocket.com/posts/faef1058c3-inheriting-from-linkcomponent-in-ember-is-amazing
In ckeditor editor and (ADDED) using Drupal 7
I click Html Source and paste:
<span><i class="fa fa-facebook"></i></span>
then ckeditor remove the a and the i elements to become:
<span></span>
The problem is that I can't put a i element inside an a element:
<i class="fa fa-facebook"></i>
How can I solve this?
I had a similar problem with the span element which I solved adding in the Custom JavaScript configuration:
config.allowedContent = true;
allowedContent means ONLY allow these entities. extraAllowedContent means allow these entities in addition to default ones. So you can use one of these:
CKEDITOR.replace('textarea_id', {
allowedContent: 'span i a'
});
Or
CKEDITOR.replace('textarea_id', {
extraAllowedContent: 'i a'
});
I have the following setup:
<div data-ng-repeat="item in navigationBar.navObject.items" class="btn-group">
<button data-ng-class="{current: $last}" class="btn btn-default btn-xs" type="button" data-ng-click="navigationBar.goToState(item)"> {{item.name}}</button>
<button data-ng-hide="item.isTerminal" data-toggle="dropdown" class="btn btn-default btn-xs dropdown-toggle" type="button">
<span class="fa fa-fw fa-caret-right"></span>
</button>
<ul class="dropdown-menu">
<li data-ng-repeat="subItem in item.subItems"><a data-ng-click="subItem.item.goToState()">{{subItem.name}}</a></li>
</ul>
</div>
And I would like the icon in the dropdown to change from fa-caret-right to fa-caret-down when the dropdown list is visible. Is there any way to do this strictly with CSS?
You won't be able to change the attributes of HTML elements using CSS, you'll probably want to use jQuery instead.
Bootstrap has some nifty JavaScript going on, where you can execute your own scripts when boostrap elements inside your website is used.
Initialize dropdown using this inside jQuery.
$('.dropdown-toggle').dropdown();
When it's called you can hook different actions to it using the handles specified on the bootstrap docs.
on('show.bs.dropdown', function(){}); is just a fancy word for saying "on dropdown"
$('.dropdown-toggle').on('show.bs.dropdown', function () {
// All actions to fire after the dropdown is shown go here.
$('.fa .fa-fw').addClass('fa-caret-right');
$('.fa .fa-fw').removeClass('fa-caret-down');
})
I know this is an old post, but I was looking for this solution and have one that works for me. You can target and change the pseudo element inside that span. When you click the button, doesn't the button add an open class? So, then the css would look like:
btn.open .fa-caret-right:before { content: "\e114"; }
Use the .open added to the button class.
The \e114 being the character of the down arrow.
I'm trying to add a custom class to the jQuery Mobile theme. The CSS should look something like this:
.ui-icon-form-ok-f {
background-color: #f09000 !important;
data-icon: check !important;
}
but how can I get jQuery Mobile to recognize this? Thanks.
How to recognize a custom icon style to jqm
For each elements of any
When you set [data-icon=AAA] on buttons, jqm creates <span class="ui-icon-AAA"> inside the buttons.
That is:
<a data-role="button" data-icon="form-ok-f">custom icon button</a>
When loads this html, jqm creates like this:
<a href="#" data-role="button" data-icon="form-ok-f" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="c" class="ui-btn ui-shadow ui-btn-corner-all ui-btn-icon-left ui-btn-up-c">
<span class="ui-btn-inner ui-btn-corner-all">
<span class="ui-btn-text">custom icon button</span>
<span class="ui-icon ui-icon-form-ok-f ui-icon-shadow"> </span>
</span>
</a>
So, jqm can recognize your custom-icon-class.
.ui-icon-form-ok-f {
background-color: #f09000 !important;
background-position:-252px 50% !important; /* this mean 'data-icon="check"' on css */
}
By applying this way, pages can load "ui-icon-alt"
<a data-role="button" data-icon="check ui-icon-alt">custom icon button</a>
Jqm renders Black icons (Alt icon color) instead of White icons.
For each theme of any
If you want to 'customize' icon for each theme of any, you should be loaded js like this:
$(function(){
var $alttheme = new Array( "f", "g" ); // this arr means 'data-theme="f", data-theme="g"'
var at = new Array();
for( t in $alttheme ){
at.push(':jqmData(theme="' + alttheme[t] + '"):jqmData(icon="check") > span > .ui-icon');
}
$(at.join()).addClass('ui-icon-"YOUR CUSTOM NAMES"');
});
*YOUR CUSTOM NAME (eg.form-ok, form-ng ...)
OR
$(function(){
$(':jqmData(theme="f"):jqmData(icon="check") > span > .ui-icon').addClass('ui-icon-form-ok-f');
$(':jqmData(theme="g"):jqmData(icon="check") > span > .ui-icon').addClass('ui-icon-form-ok-g');
});
The former adds the same class to icons in "theme g" and "theme f", the latter adds respectively a separate class to icons in "theme g" and "theme f".
At last
i've to prepare for some samples.
I think you should override also other classes, like .ui-bar-f, .ui-body-f, .ui-btn-up-f,... and then use the attribute data-theme="f" of each tag to specify that you want to use this new theme for the component, but I have not managed to test it.
More information is in jQuery-Mobile docs about theming.
Hope it helps!