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
Related
I'm trying to implement a TinyMCE button that will apply the style of the selection to the entire box. I'm having trouble, though, reading the style of the selection when the selection is buried in a span in a span in a paragraph. Let's consider 'color' for example. Below I have a box with some text and I've selected "here" in the paragraph and made it red.
The HTML for the paragraph is now:
The code behind my button to apply the style of the selection to the box is
var selected_color = $(ed.selection.getNode()).css('color');
console.log("color pulled is ", selected_color);
$(ed.bodyElement).css('color', selected_color);
It doesn't work because the color pulled is black, not red, so the third line just re-applies the black that's already there. (If I replace selected_color in the third line with 'blue' everything goes blue.) So the problem is pulling the color of the current selection.
Does anyone know how I can do this reliably, no matter how buried the selection is?
Thanks for any help.
I also noticed somewhat a strange behavior up and there, with selections of nested span's and div's, but honestly i'm not able to recognize if this is a bug of TinyMCE, a browser issue or a combination of both (most probably).
So, waiting for some more information from you (maybe also your plugin code) in the meanwhile i realized two proposal to achieve what you want: the first plugin behaves like the format painter in word, the second is simply applying the current detected foreground color to the whole paragraph.
As you move throug the editor with the keyboard or mouse, you will see the current detected foreground color highlighted and applied as background to the second plugin button.
Key point here are two functions to get the styles back from the cursor position:
function findStyle(el, attr) {
var styles, style, color;
try {
styles = $(el).attr('style');
if(typeof styles !== typeof undefined && styles !== false) {
styles.split(";").forEach(function(e) {
style = e.split(":");
if($.trim(style[0]) === attr) {
color = $(el).css(attr);
}
});
}
} catch (err) {}
return color;
}
function findForeColor(node) {
var $el = $(node), color;
while ($el.prop("tagName").toUpperCase() != "BODY") {
color = findStyle($el, "color");
if (color) break;
$el = $el.parent();
}
return color;
}
The try...catch block is needed to avoid some occasional errors when a selected text is restyled. If you look at the TinyMCE sorce code you will notice a plenty of timing events, this is a unavoidable and common practice when dealing with styles and css, even more with user interaction. There was a great job done by the authors of TinyMCE to make the editor cross-browser.
You can try out the first plugin in the Fiddle below. The second plugin is simpler as the first one. lastForeColor is determined in ed.on('NodeChange'), so the code in button click is very easy.
tinymce.PluginManager.add('example2', function(ed, url) {
// Add a button that opens a window
ed.addButton('example2', {
text: '',
icon: "apply-forecolor",
onclick: function() {
if(lastForeColor) {
var applyColor = lastForeColor;
ed.execCommand('SelectAll');
ed.fire('SelectionChange');
ed.execCommand('forecolor', false, applyColor);
ed.selection.collapse(false);
ed.fire('SelectionChange');
}
return false;
}
});
});
Moreover: i think there is a potential issue with your piece of code here:
$(ed.bodyElement).css('color', selected_color);
i guess the style should be applied in a different way, so in my example i'm using standard TinyMCE commands to apply the foreground color to all, as i wasn't able to exactly convert your screenshot to code. Please share your thoughts in a comment.
Fiddle with both plugins: https://jsfiddle.net/ufp0Lvow/
deblocker,
Amazing work! Thank you!
Your jsfiddle did the trick. I replaced the HTML with what was in my example and changed the selector in tinymce.init from a textarea to a div and it pulls the color out perfectly from my example. The modified jsfiddle is at https://jsfiddle.net/79r3vkyq/3/ . I'll be studying and learning from your code for a long time.
Regarding your question about
$(ed.bodyElement).css('color', selected_color);
the divs I attach tinymce to all have ids and the one the editor is currently attached to is reported in ed.bodyElement. I haven't had any trouble using this but I have no problem using your
ed.execCommand('SelectAll');
ed.fire('SelectionChange');
ed.execCommand('forecolor', false, applyColor);
Thanks again! Great job!
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;
}
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]
Has anyone managed to create a button in TinyMCE 4 that will increment the font size of the selected text by, say, 1px?
The problem I'm having is getting ahold of the selected text, whether it's in a span already or not.
I'm willing to modify the TinyMCE source.
Thanks for any ideas.
You don't need to modify the source code, you can create a plugin.
Here is the documentation of how to create a plugin for TinyMCE:
http://www.tinymce.com/wiki.php/Tutorials:Creating_a_plugin
based on that you can create your own button (see working example)
here is part of the code:
var currentFontSize = new Number($(tinyMCE.activeEditor.selection.getNode()).css('font-size').replace('px','')); //remove the px part
currentFontSize = currentFontSize + 1; //increase font by one
tinymce.activeEditor.formatter.register('mycustomformat', {
inline : 'span',
styles : {'font-size' : currentFontSize + 'px'} //this is the font size incremented by one
});
tinymce.activeEditor.formatter.apply('mycustomformat'); //apply the format to the selected text
I am using dojo 1.7.2 and I have a datagrid. In one of the columns I have a long description that I want to show or hide when a "see more" link is clicked. I got all of that working with a formatter but when the description expands the datagrid's outer container does not get taller (in other words the rows below just get pushed down out of site. Is there anyway to change the height of the grid when I click on my show/hide (can the grid be redrawn? If so how?)
Update: I have created a js fiddle that shows what I want to do. You will see there is hidden text and when you click, it shows, but the rows at the bottom are pushed out of view:
http://jsfiddle.net/erayK/
Because I have to include some code, here is the formatter I used:
function formatLink(value){
// value 0: title, value 1: description, value 2: url
return ''+value[0]+'<br /><div style="display:none;" id="' + value[0] + '">'+value[1]+'</div>show or hide';
}
I found an acceptable solution, I can override the dojo styling that cuts off the stuff at the bottom and add a scrollbar using:
.dojoxGridContent {
overflow: auto;
}