Can I use complex HTML with Twitter Bootstrap's Tooltip? - javascript

If I check official documentation, I can see a property called HTML:
Name | Type | default | Description
----------------------------------------------------------------------------
html | boolean | false | Insert html into the tooltip.
If false, jquery's text method
will be used to insert content
into the dom. Use text if you're
worried about XSS attacks.
It says, "insert html into the tooltip", but the type is boolean. How can I use complex html inside a Tooltip?

This parameter is just about whether you are going to use complex html into the tooltip. Set it to true and then hit the html into the title attribute of the tag.
See this fiddle here - I've set the html attribute to true through the data-html="true" in the <a> tag and then just added in the html ad hoc as an example.

Another solution to avoid inserting html into data-title is to create independant div with tooltip html content, and refer to this div when creating your tooltip :
<!-- Tooltip link -->
<p><span class="tip" data-tip="my-tip">Hello world</span></p>
<!-- Tooltip content -->
<div id="my-tip" class="tip-content hidden">
<h2>Tip title</h2>
<p>This is my tip content</p>
</div>
<script type="text/javascript">
$(document).ready(function () {
// Tooltips
$('.tip').each(function () {
$(this).tooltip(
{
html: true,
title: $('#' + $(this).data('tip')).html()
});
});
});
</script>
This way you can create complex readable html content, and activate as many tooltips as you want.
live demo here on codepen

Just as normal, using data-original-title:
Html:
<div rel='tooltip' data-original-title='<h1>big tooltip</h1>'>Visible text</div>
Javascript:
$("[rel=tooltip]").tooltip({html:true});
The html parameter specifies how the tooltip text should be turned into DOM elements. By default Html code is escaped in tooltips to prevent XSS attacks. Say you display a username on your site and you show a small bio in a tooltip. If the html code isn't escaped and the user can edit the bio themselves they could inject malicious code.

The html data attribute does exactly what it says it does in the docs. Try this little example, no JavaScript necessary (broken into lines for clarification):
<span rel="tooltip"
data-toggle="tooltip"
data-html="true"
data-title="<table><tr><td style='color:red;'>complex</td><td>HTML</td></tr></table>"
>
hover over me to see HTML
</span>
JSFiddle demos:
Bootstrap 2.x
Bootstrap 3.x

set "html" option to true if you want to have html into tooltip. Actual html is determined by option "title" (link's title attribute shouldn't be set)
$('#example1').tooltip({placement: 'bottom', title: '<p class="testtooltip">par</p>', html: true});
Live sample

As of bootstrap 5, you can just specify the contents of the tooltip to be html DOM nodes when configuring it. Sample config...
// setup tools tips trigger
const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
const tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new Tooltip(tooltipTriggerEl, {
html: true // <- this should do the trick!
})
});

For bootstrap 5, you can use data-bs-html="true" with the title tag data-bs-original-title="Tooltip Title"

Related

How can I use a string in image `alt` tag without encode by AngularJs

If I have this AngularJs code:
<div class="myStyle">
TITLE:
{{product.title}}
</div>
I want show title without encode. so I know it's one solution:
<div class="myStyle">
TITLE:
<span ng-bind-html="product.title"></span>
</div>
But I don't happy about extra <span> code!
Also if I have this code:
<img src="img.jpg" alt="{{product.title}}">
I can not use extra span, Now how can I show title in alt tag of image without encode?!
I am assuming that since you use ng-bind-html that product.title is html string , not text
You could create a custom filter that returns text from html string
app.filter('htmlToText', function(){
return function(html){
return angular.element('<div>').append(html || '').text();
};
});
View
<img src="img.jpg" alt="{{product.title | htmlToText}}">
For showing product.title in div, if you don't like the extra span, you might try:
<div class="myStyle" ng-bind="product.title"></div>
where in your javascript code, you can add a prefix: "Title: " to product.title. (Although i don't feel having an extra span is bad)
Another side note, I see you are using ng-bind-html. Is "product.title" really html? If it contain some styles, maybe you can revise your "myStyle" to control the style. Let data be data.
For the image one, you probably don't need to worry about the {{ }}.
I am guessing the reason you don't like {{ }} is they may show briefly before angular can render the template with the data. However, if you put them in , the browser will not show content inside of alt unless your image is not available (If the image is really not available, you may consider revisiting your codes to make sure it is available, or to display a default image)

bootstrap tooltip - use jquery to dynamically change css & placement

I am using Bootstrap v3.3.5 and JQuery v1.11.3 .
I have a select list that when a value is selected, I would like the placement and css class of a tooltip to change.
I have searched Google & SO and read many SO posts, but the many attempts I have made fail. For example, this did not work for me.
Here is my html code:
<select id="id_cover_letter_type" name="cover_letter_type">
<option value="0" selected="selected">I will write my own data</option>
<option value="1">Standard Cover Letter</option>
....
</select>
<i id="id_icon_id_cover_letter_details_second_paragraph" class="fa fa-lightbulb-o blue_color icon_size26 verticalAlignTop" data-original-title="" title="" aria-describedby="tooltip229278"></i>
Here is my jquery code:
I have included the commented out attempts that I have made to change the data-placement of the tooltip (taken from other posts) that did not work for me.
$("#id_icon_id_cover_letter_details_second_paragraph").tooltip({'html': true, 'placement': 'bottom', 'title': '{% trans "Paragraph 2" %} <br /><br /> {% trans "This should detail why you want the job." %} <br /><br /> {% trans "Explain how your qualifications and career plan match the advertised position." %} <br /><br /> {% trans "The details you provide here should display that you have researched the employer, what the employer and industry are seeking and that you understand what the job requires." %}'});
if ( $('#id_cover_letter_type').val() == '0' ) {
// the following code did not work.
//$('#id_icon_id_cover_letter_details_second_paragraph').data('bs.tooltip').options.placement = 'left';
// the following code did not work.
//$('#id_icon_id_cover_letter_details_second_paragraph').tooltip({ placement: 'left' });
// the following, destroying, appling the placement and then showing the tooltip did not work.
//$('#id_icon_id_cover_letter_details_second_paragraph').tooltip('destroy');
//$("#id_icon_id_cover_letter_details_second_paragraph").tooltip({'placement':'left'});
//$("#id_icon_id_cover_letter_details_second_paragraph").tooltip('show');
// applying the placement and the showing the tooltip did not work.
//$("#id_icon_id_cover_letter_details_second_paragraph").tooltip({placement : 'left'}).tooltip('show');
} else {
// the following code did not work.
//$('#id_icon_id_cover_letter_details_second_paragraph').data('bs.tooltip').options.placement = 'bottom';
// the following code did not work.
//$('#id_icon_id_cover_letter_details_second_paragraph').tooltip({ placement: 'bottom' });
// the following, destroying, appling the placement and then showing the tooltip did not work.
//$('#id_icon_id_cover_letter_details_second_paragraph').tooltip('destroy');
//$("#id_icon_id_cover_letter_details_second_paragraph").tooltip({'placement':'bottom'});
//$("#id_icon_id_cover_letter_details_second_paragraph").tooltip('show');
// applying the placement and the showing the tooltip did not work.
//$("#id_icon_id_cover_letter_details_second_paragraph").tooltip({placement : 'bottom'}).tooltip('show');
}
Also, if someone can tell me the answer to change the css of the tooltip to class name custom-tooltip-styling123, that would be fantastic.
EDIT
Here is a jsfiddle. This is only my 2nd fiddle, and I don't know how to add in the bootstrap to make the tooltip display.
The main problem
You forgot to add id="id_icon_id_cover_letter_details_second_paragraph" to your img element.
Also you need to wrap your js code by the following one:
$(function () { // On document ready wrapper
// your code ...
});
And the last point is to add tooltip initialization:
$('#id_icon_id_cover_letter_details_second_paragraph').tooltip();
For full code just check this jsfiddle
How to change css of tooltip
There are several solutions you can find on stackoverflow, like this for example.
tooltip has option template which default value is:
'<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'
You can add CUSTOM_CSS and pass updated version of this option, for example:
'<div class="tooltip CUSTOM_CSS" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'
Or you can define your own css rules for .tooltip class.
Actually there are more solutions. It's your choice, choose one of them. You know html structure and classes of tooltip element, so manipulate it as you wish.
For more info about template option requirements check the official documentation here

How to make an element's content editable with JavaScript (or jQuery)

How would I make it so the content of an element could be made editable through native JavaScript (DOM) and/or jQuery?
JavaScript:
document.getElementById('elementId').contentEditable = 'true';
Solution to toggle editable on/off using a click handler:
$('button').click(function(){
var $div=$('div'), isEditable=$div.is('.editable');
$div.prop('contenteditable',!isEditable).toggleClass('editable')
})
DEMO
Look at this example i've made:
http://jsfiddle.net/K6W7J/
JS:
$('button').click(function(){
$('div').attr('contenteditable','true');
})
HTML:
<button>CLICK</button>
<div>YOUR CONTENT</div>
If you use jQuery to add the attribute to the element you should be able to switch between edit mode and 'normal' HTML mode. The contenteditable attribute is supported by all major browsers. Check out http://blog.whatwg.org/the-road-to-html-5-contenteditable for more information.
Or you can use this plugin which i have been with no problem any time. it is realy simple
and easy to use.
Here an example:
Html:
<div style="margin: 150px">
awesome
</div>
JS
$('#username').editable({
type: 'text',
url: '/post',
pk: 1,
title: 'Enter username',
ajaxOptions: {
type: 'put'
}
});
DEMO
All we have to do is set the contenteditable attribute on nearly any HTML element to make it editable.
Here's a simple example which creates a element whose contents the user can edit.
<div contenteditable="true">
This text can be edited by the user.
</div>

Dashlet edit button in titlebar not showing correctly

I am trying to create a simple Alfresco dashlet with an edit button enabled on the title bar. Unfortunately, I can not figure out how to get the edit button to actually display on the title bar.
Here is what I have so far:
dashlet desc file (.desc.xml)
<webscript>
<shortname>Sample</shortname>
<description>Displays a Sample dashlet</description>
<family>dashlet</family>
<url>/mycompany/components/dashlets/sample-dashlet</url>
</webscript>
My main freemarker template file (.ftl)
<script type="text/javascript">
//<![CDATA[
var sampleDashlet = new MyCompany.dashlet.SampleDashlet("${args.htmlid}").setOptions({
"componentId": "${instance.object.id}",
"siteId": "${page.url.templateArgs.site!""}",
"title": "${msg("header")}"
}).setMessages(${messages});
new Alfresco.widget.DashletResizer("${args.htmlid}", "${instance.object.id}");
var editDashletEvent = new YAHOO.util.CustomEvent("onDashletConfigure");
editDashletEvent.subscribe(sampleDashlet.onConfigClick, sampleDashlet, true);
new Alfresco.widget.DashletTitleBarActions("${args.htmlid}").setOptions({
actions: [{
cssClass: "edit",
eventOnClick: editDashletEvent,
tooltip: "${msg("dashlet.edit.tooltip")?js_string}"
}]
});
//]]>
</script>
<div class="dashlet-1">
<div> Test </div>
</div>
It seems as if the problem must be in my configuration somewhere, but I can't find it. Can anyone point me in the right direction, please?
If you want a working example of a very simple dashlet that is set up to be configurable in this way, see http://code.google.com/p/alfresco-get-latest-document. This blog post sets up the basic functionality: http://ecmarchitect.com/archives/2012/05/08/1592. And this blog post expands on that to make the initial dashlet configurable: http://ecmarchitect.com/archives/2012/05/15/1599.
In comparing your FTL with mine, I'm wondering if your div classes/id need to follow this pattern:
<div class="dashlet getlatestdoc">
<div id="getlatestdoc_title" class="title">
${title}
</div>
Otherwise, how will the edit button know where to render itself?
As Jeff suggests, you need to include a <div> element for the dashlet's title bar in your markup with an appropriate value for the class attribute, as follows
<div class="dashlet dashlet-1">
<div class="title">Title</div>
<div class="body">Body content</div>
</div>
When the Alfresco.widget.DashletTitleBarActions instance that your inline JavaScript code creates gets instantiated it will look for a child <div> with the class title and will add the actions there.
I also added a dashlet class to the parent div, which is required for the default dashlet styles to be applied.

Ckeditor adds empty paragraphs when applying a style

My CKEditor is adding a lot of unnecessary tags when applying a style to a selected paragraph
I initiate CKeditor with the following html:
<p>
Hi, this a text!</p>
When I select the paragraph and apply a style using the toolbar, CKEditor formats my html to the following:
<p>
<span style="display: none;"> </span></p>
<p>
<span id="cke_bm_173S" style="display: none;"> </span>Hi, this a text!<span id="cke_bm_173E" style="display: none;"> </span></p>
<p>
<span style="display: none;"> </span></p>
Is there any way preventing CKEditor from adding the paragraphs with the non breaking space?
Things I've already tried are adding config.fillEmptyBlocks = false; and config.IgnoreEmptyParagraphValue = true; to my config file
Update
Turns out this problem was caused by the style itself which was a custom defined style. This piece of code was the problem: {name : 'Heading1', element : 'p class= "subheadingsecondlevel"}, once I changed it to: {name : 'Heading1', element : 'p', attributes : {class : 'subheadingsecondlevel'} }
You might want to consider these:
config.enterMode = CKEDITOR.ENTER_BR;
config.autoParagraph = false;
You can check out my post here for more info:
How to configure ckeditor to not wrap content in <p> block?
The following config setting will stop the editor from inserting a non-breaking space in empty paragraphs:
config.fillEmptyBlocks = false;
Was all of the additional code inserted after applying just one style?
What style did you apply, is all the extra code inserted regardless of the style you use?
What happens if you select the text and click the bold button?
Is the code you are showing being copied from the source view of the editor or from the final page that you use to display your content?
Be Well,
Joe
Or, if all fails, you can use the CSS selector pseudo-class ':empty' and give it a 'display:none'. In practice, you add this line to your CSS:
p:empty {
display:none
}
I understand it's a dirty solution but it works perfectly in most cases and has minimal inpact on design and functionality.

Categories