I want to remove the title area from the ionic popup completely. I removed the title tag and tried. but still can see the title space visible. Here is my code.
var registerPopup = $ionicPopup.show({
templateUrl: 'templates/register_popup.html',
scope: $scope
});
Even if I remove the title tag completely, the title area is still visible with a blank space as shown in the image below. I want to remove the entire title space from the ionicPopup. How can I get it? what changes are to be made in the code?
It is because the title is wrapped inside .popup-head which takes the space.
First add a value of custom-class to cssClass property in the Popup object.
var registerPopup = $ionicPopup.show({
templateUrl: 'templates/register_popup.html',
cssClass: 'custom-class', // Add
scope: $scope
});
You can hide it using custom CSS.
.custom-class .popup-head {
display: none;
}
Related
I'm using a typeahead Vue component inside of a Swal2 popup, I've adjusted the height using a custom class so I can get all of the typeahead dropdown data inside (or what would appear inside) the popup.
But I can't seem to get the content to align to the top.
I'm sure it's just a flex box setting but I can't figure out what to add to my custom class the get this aligned top.
.lookup-custom-height {
height: 400px;
}
CODE REQUESTED:
lookup() {
swal({
title: 'Substance Lookup',
html: '<sub-typeahead placeholder="Search for Substances ..." item="material" display="name"></sub-typeahead>',
showConfirmButton: false,
customClass: 'lookup-custom-height',
})
return new Vue({
el: swal.getContent(),
components: {
SubTypeahead
}
})
},
I need a tooltip for each items the problem is that when I put for example :
title:'<b>Hover over me<b></br>test'the style is not applicated and so in the tooltip the result was <b>Hover over me<b></br>test not Hover over me test.
I want to change the style of every title in the tooltip .
please have you any ideas
Without some further information, it seems you are in the correct path.
As per documentation:
title - string - "Add a title for the item, displayed when holding the mouse on the
item. The title can be an HTML element or a string containing plain
text or HTML."
Working sample below:
var data = new vis.DataSet([{
id: 2,
content: 'Pi and Mash',
start: '2014-08-08',
title: '<b> Bold title </b> <br> Not bold'
},
...
var timeline = new vis.Timeline(container, data, options);
http://jsfiddle.net/sm4r5pvc/
Update vis version. In the older version, we don't have the tooltip. Make sure you are working with v4.21.0 and above
I have 2 nested <div>s, both with tooltip().
When I hover over the
inner <div>, the outer <div> also shows it's tooltip.
I tried to work around this by setting the inner <div>'s title
to an empty string on :hover.
$(inner).hover({
$(outer).attr('title','');
},{
$(outer).attr('title','original title');
});
I created a codepen examplenote: I changed title to 'red' so you can see that the title did indeed change.
Why is it that changing the title doesn't change tooltip's content?
How do we change the Bootstrap Tooltip's content? (this should be a stackoverflow question of it's own)
Answering #1:
By inspecting the elements and watching it change with your JS code, i noticed a attribute on the divs called data-original-title which still holds "blue" when you enter green (this is what the tooltip element reads and displays). By changing your script to
$('#a').attr({"data-original-title": "red"});
the blue becomes red. Does this answer your question?
Use .tooltip('hide') and .tooltip('show')
this was answered in part by #BuddhistBeast, thanks!
$("#b").on('mouseover', function(){
$('#a').tooltip('hide');
}).on('mouseleave', function(){
$('#a').tooltip('show');
});
$('[data-toggle="tooltip"]').tooltip({
animated : 'true',
placement : 'bottom',
container: 'body'});
You can check whether you are currently hovering inside of the inner block
jQuery:
$(document).ready(function(){
var bIsShown = true;
$("#b").on('mouseenter', function(){
bIsShown = true;
}).on('mouseleave', function() {
bIsShown = false;
})
$("#a").on('mousemove', function(){
if(bIsShown) {
$(this).data("bs.tooltip").$tip.removeClass("in");
}
else {
$(this).data("bs.tooltip").$tip.addClass("in");
}
})
$('[data-toggle="tooltip"]').tooltip({
animated : 'fade',
placement : 'bottom',
container: 'body'});
});
Your Example: http://codepen.io/anon/pen/JGqXPw
I added button to by Crossrider extension (see snippet) but I can't see how to add a tootip when hovering over the button. Are tooltips supported?
Exmaple code in background.js:
appAPI.ready(function($) {
appAPI.browserAction.setResourceIcon('icon.jpg');
appAPI.browserAction.onClick(function() {console.log('hello world!');});
});
Like most HTML tags, the title attribute is used to add a tooltip to an element; hence, to add a tooltip to a Crossrider toolbar button you simply set its title attribute using appAPI.browserAction.setTitle.
Using your snippet as a base, you can use the following example to set the tooltip to "My tooltip":
appAPI.ready(function($) {
appAPI.browserAction.setResourceIcon('icon.jpg');
appAPI.browserAction.setTitle('My tooltip');
appAPI.browserAction.onClick(function() {console.log('hello world!');});
});
[Disclosure: I am a Crossrider employee]
I'd like an option with the TinyMCE color picker to choose transparent as the color so a character (a "bullet") will still be there and take up space but will not be visible if it's color is transparent.
There's an "X" box option that says "No color" but this seems to make the color black, not transparent.
Does anyone know how to add a transparent color option to this color picker, or even make the "X" box implement transparent instead of black?
Thanks for any ideas.
I believe I was able to do that, I did some quick tests and it appears to be working fine.
I got the latest version of TinyMCE (4.1.10_dev) to access the textcolor plugin's non minified javascript there's this instruction:
if (value == 'transparent') {
resetColor();
} else {
selectColor(value);
}
What happens here? When you choose a color it runs the selectColor, which wraps the selected text in a span with the selected color. However, when you select the no color it removes this color span (that's why it goes back to black which is the default color) instead of setting it to transparent.
So if you do this:
//if (value == 'transparent') {
// resetColor();
//} else {
selectColor(value);
//}
Instead of removing the span it will change it to 'transparent' instead.
One important thing is that tinyMCE gets the plugin scripts automatically, so it only works with the minified versions, so after you do these changes you'll have to minify the script to the plugin.min.js and put it on the textcolro plugin's folder overwriting the one there.
I hope it helps.
The × button in the colorpicker removes any custom colours, it does not add a zero-opacity colour.
As you can see when looking at the source code or trying the full example there is no support for rgba() or opacity in the included colorpicker plugin. Only rgb() and hex unfortunately.
You may need to create your own small plugin to add the ability. There are a number of alternatives, for example:
Create a CSS class which you can add to elements in the editor. Then do your colour magic in your own CSS file.
Create a new button in the toolbar which makes the element transparent.
I would personally go with option two, something like this:
tinymce.init({
selector: 'textarea',
plugins: 'nocolour',
toolbar: 'nocolour',
external_plugins: {
"nocolour": "url_to_your/nocolour.js"
}
});
And nocolour.js:
tinymce.PluginManager.add('nocolour', function(editor, url) {
// Add a button that opens a window
editor.addButton('nocolour', {
text: 'Remove Colour',
icon: false,
onclick: function() {
editor.undoManager.transact(function() {
editor.focus();
// Here is where you add code to remove the colour
editor.nodeChanged();
});
}
});
});
Rafael's solution worked for me. I just wanted to document it a bit more and show what it looks like for TinyMCE 4.1.7.
When you click the "X" in the textcolor grid the "value" variable gets "transparent," rather than a hex value from the colorMap.
The relevant code in the textcolor plugin is:
value = e.target.getAttribute('data-mce-color'); // the hex color from the colorMap square that was clicked. "transparent" if X was clicked
if (value) {
if (this.lastId) {
document.getElementById(this.lastId).setAttribute('aria-selected', false);
}
e.target.setAttribute('aria-selected', true);
this.lastId = e.target.id;
// if (value == 'transparent') { // occurs if you select the "X" square
// removeFormat(buttonCtrl.settings.format);
// buttonCtrl.hidePanel();
// return;
// }
selectColor(value);
The five lines I've commented out remove formatting for the selected text, leaving it black, which doesn't seem useful. If you wanted the text black you could select the black square in the colorMap. Falling through to selectColor(value) with value = "transparent" sets transparent as the color.