As a part of a Bootstrap table I have the following code:
<xp:text escape="false"
id="tableRowstart" >
<xp:this.value><![CDATA[#{javascript:
if (rIndex % 2){
return "<tr style='background-color:#e6e6e6'><td>"
}else{
return "<tr style='background-color:#fbfbfb'><td>"}}]]></xp:this.value>
</xp:text>
this is part of a repeat control and rIndex is the repeat index value. The above code works fine, but I want to use it in a css. So I added these lines to my css:
.oddLineBackground {background-color:#e6e6e6 ;}
.evenLineBackground {background-color:#fbfbfb ;}
If I modify my code to use the css as follows:
<xp:text escape="false"
id="tableRowstart" >
<xp:this.value><![CDATA[#{javascript:
if (rIndex % 2){
return "<tr style='oddLineBackground'><td>"
}else{
return "<tr style='evenLineBackground'><td>"}}]]></xp:this.value>
</xp:text>
The line colors do not change, they display with no style applied. I can apply the oddLineBackground and evenLineBackground to a panel or ??? directly from the style picker and they display correctly but when I compute them they don't seem to compute correctly. I'm guessing that it is something in my syntax, but can't figure it out.
Change:
<tr style='oddLineBackground'>
to this:
<tr class='oddLineBackground'>
i am trying to Append spans in a div. Below is my div code
<div
id="paragraph"
class="paragraph"
name="paragraph">
</div>
This is code i am implementing in my Controller
$scope.style_Text = {color:'#F00'};
for(var i = 0; i< $scope.paragraph.length; i++)
{
var span = "<span ng-style='style_Text' id='c"+i+"'>"+$scope.paragraph[i]+"</span>";
$( ".paragraph" ).append($(span));
console.log(span);
}
Spans are added in the div, but style is not applied. When i copy the span from console and place it above div. This span is working fine. Style is applied on it.
I have tried putting style='color:red;' instead of ng-style, It also works.
Please help how to use ng-style here. Thank
What for u doing this? Thats bad pattern.
Your HTML:
<div
id="paragraph"
class="paragraph"
name="paragraph">
<span ng-repeat="elem in list">{{ elem.xxx }}</span>
</div>
In controller just add objects in your $scope.list after some action
$scope.addToList = function() {
$scope.list.push({...});
}
And angular add them to DOM inside your div tag.
If you use not angular event model for refresh DOM use $scope.$apply().
Do not mix jQuery to Angular, you really not need to
Do all the DOM manipulation in directives!
Now to your question, if you really want to it your way
You wanted this $scope.style_Text = {color:'#F00'}; to be a string I guess, so $scope.style_Text = '{color:\'#F00\'};' and then var span = "<span ng-style=" + $scope.style_Text + " id='c"+i+"'>"+$scope.paragraph[i]+"</span>";
But really please do a directive
Edit: in such a case like this, what is the point of using ng-style and not style itself?
below is my google apps script to display HTML form in the mail to the client and fetching response via web-service. this works fine when my client is using Gmail account and form is displaying perfectly nice and also all the events are working correctly. but the problem occurs when my client tries this same with outlook account the <textarea>, <button> (these tags are not displaying). Can anyone tell me what's the problem? for outlook account is there any more settings we need to do?
function sendAutoReply(e)
{
var myemail = "viral.shah#searce.com";
var email = "";
var subject = "Your Request Status Message..";
var html =
'<body>' +
'<table border="1">'+
'<tr>'+
'<td>'+
'<label> Comment </label>'+'<br>'+'<br>'+
'</td>'+
'</tr>'+
'<tr>'+
'<td>'+
'<textarea rows="5" cols="100"/>'+'<br>'+'<br>'+
'</td>'+
'</tr>'+
'<tr>'+
'<td>'+
'<input type="button" value="accept"/>' +
'</td>'+
'<td>'+
'<input type = "button" value = "Decline"/>'+
'</td>'+
'</tr>'+
'</table>'+
'</body>';
try {
for(var field in e.namedValues) {
if (field == 'Subject') {
subject += e.namedValues[field].toString();
}
if (field == 'Email') {
email = e.namedValues[field].toString();
}
html += field + ' : '
+ e.namedValues[field].toString() + "\n\n";
}
MailApp.sendEmail(email, subject, html, {replyTo:myemail, htmlBody:html});
}
catch(e){
MailApp.sendEmail(myemail, "Error in Auto replying to contact form submission. No reply was sent.", e.html);
}
}
Thanks in Advance :)
Outlook doesn't support the <button> tag:
The HTML tags that Outlook supports
Try using <input type="button"> instead of and it should work.
As for <textarea>, it's technically supported, but there appear to be lots of people who complain about it not working. That document says in one place that it supports the "cols" attribute and in another place that it does not, so try removing that perhaps. Also, Outlook is finicky enough about HTML that I'd try explicit closing tags like <textarea></textarea> instead of the shorthand style.
No, I'm telling it won't support any HTML tags into outlook email client
Please Go through this Forum Link
And this MSDN link
I think these articles will make clear thoughts about this.
for outlook 2007 mail client not displaying forms there. so, this one is not possible in outlook mail client. check the given link.
Hope this one helps you.
If the button action is simple enough that can be equivalent to visiting an url, you can add a message like the following:
Confirm email through this link if confirm button is unavailable
https://www.example.com/confirm/av87hfua7ImAToken4vf8a98jao5ia
Those who see the button will also see this sentence, but since this is a fairly common practice it won't cause much noise.
I have this code, when the row is clicked the row is changed to 'selected_row'. When clicked again it´s supposed to change back to '$class', but it doesn't. What is causing the trouble and how can I solve this?
$class = ($class == 'even') ? 'odd' : 'even';
echo '<tr class="'.$class.'" onclick="this.className=this.className==\'selected_row\'? '.$class.' :\'selected_row\';">
You forgot a closing quote behind the last $class.
I think these kind of syntax errors should show up when you use FireBug or similar debugging tools.
Hi you could try this, simply place the function below within the section of your html code.
<script type="text/javascript">
function toggleClass(ele,customClass)
{
ele.className=ele.className=='selected_row' ? customClass:'selected_row';
}
</script>
Then change your existing syntax from:
echo '<tr class="'.$class.'" onclick="this.className=this.className==\'selected_row\'? '.$class.' :\'selected_row\';">
To:
echo '<tr class="'.$class.'" onclick="toggleClass(this,\''.$class.'\');"><td>apple</td></tr>';
Hope this helps.
How can line breaks be added within a HTML tooltip?
I tried using <br/> and \n within the tooltip as follows:
Hover me
However, this was useless and I could see the literal text <br/> and \n within the tooltip. Any suggestions will be helpful.
Just use the entity code
for a linebreak in a title attribute.
Just add a data attribute
data-html="true"
and you're good to go.
Eg. usage:
<i data-html="true" class="tooltip ficon-help-icon" twipsy-content-set="true" data-original-title= "<b>Hello</b> Stackoverflow"> </i>
It has worked in majority of the tooltip plugins i have tried as of now.
The
combined with the style white-space: pre-line; worked for me.
This CSS is what finally worked for me in conjunction with a linefeed in my editor:
.tooltip-inner {
white-space: pre-wrap;
}
Found here:
How to make Twitter bootstrap tooltips have multiple lines?
\n
with the styling
.tooltip-inner {
white-space: pre-line;
}
worked for me.
Give \n between the text. It work on all browsers.
Example
img.tooltip= " Your Text : \n"
img.tooltip += " Your text \n";
This will work for me and it's used in code behind.
Hope this will work for you
I found it. It can be done by simply doing like this
<a ref="#" title="First Line
Second Line
Third line">Hover Me</a>
just use \n in title and add this css
.tooltip-inner {
white-space: pre-wrap;
}
The javascript version
Since
(html) is 0D (hex), this can be represented as '\u000d'
str = str.replace(/\n/g, '\u000d');
In addition,
Sharing with you guys an AngularJS filter that replaces \n with that character thanks to the references in the other answers
app.filter('titleLineBreaker', function () {
return function (str) {
if (!str) {
return str;
}
return str.replace(/\n/g, '\u000d');
};
});
usage
<div title="{{ message | titleLineBreaker }}"> </div>
You can use bootstrap tooltip, and don't forget to set the html option to true.
<div id="tool"> tooltip</div>
$('#tool').tooltip({
title: 'line one' +'<br />'+ 'line two',
html: true
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<br /> did work if you are using qTip
Just add data-html="true"
Hover me
it is possible to add linebreaks within native HTML tooltips by simply having the title attribute spread over mutliple lines.
However, I'd recommend using a jQuery tooltip plugin such as Q-Tip: http://craigsworks.com/projects/qtip/.
It is simple to set up and use. Alternatively there are a lot of free javascript tooltip plugins around too.
edit: correction on first statement.
For me, a 2-step solution (combination of formatting the title and adding the style) worked, as follows:
1) Format the title attrbiute:
<a ref="#" title="First Line
Second Line
Third line">Hover Me</a>
2) Add this style to the tips element:
white-space: pre-line;
Tested in IE8, Firefox 22, and Safari 5.1.7.
So if you are using bootstrap4 then this will work.
<style>
.tooltip-inner {
white-space: pre-wrap;
}
</style>
<script>
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
</script>
<a data-toggle="tooltip" data-placement="auto" title=" first line
next line" href= ""> Hover me </a>
If you are using in Django project then we can also display dynamic data in tooltips like:
<a class="black-text pb-2 pt-1" data-toggle="tooltip" data-placement="auto" title="{{ post.location }}
{{ post.updated_on }}" href= "{% url 'blog:get_user_profile' post.author.id %}">{{ post.author }}</a>
Well if you are using Jquery Tooltip utility, then in "jquery-ui.js" Javascript file find following text:
tooltip.find(".ui-tooltip-content").html(content);
and put above that
content=content.replace(/\</g,'<').replace(/\>/g,'>');
I hope this will also work for you.
Just use the entity code
for a linebreak in a title attribute.
<a title="First Line
Second Line">Hover Me </a>
Just add this code snippet in your script:
$(function () {
$('[data-toggle="tooltip"]').tooltip()
});
and ofcourse as mentioned in above answers the data-html should be "true". This will allow you to use html tags and formatting inside the value of title attribute.
The solution for me was http://jqueryui.com/tooltip/:
And here the code (the part of script that make <br/> Works is "content:"):
HTML HEAD
<head runat="server">
<script src="../Scripts/jquery-2.0.3.min.js"></script>
<link href="Content/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="../Scripts/jquery-ui-1.10.3.min.js"></script>
<script>
/*Position:
my => at
at => element*/
$(function () {
$(document).tooltip({
content: function() {
var element = $( this );
if ( element.is( "[title]" ) ) {
return element.attr( "title" );
}
},
position: { my: "left bottom-3", at: "center top" } });
});
</script>
</head>
ASPX or HTML control
<asp:TextBox ID="Establecimiento" runat="server" Font-Size="1.3em" placeholder="Establecimiento" title="Texto 1.<br/>TIP: texto 2"></asp:TextBox>
Hope this help someone
Grater than Jquery UI 1.10 is not support to use html tag inside of the title attribute because its not valid html.
So the alternative solution is to use tooltip content option.
Refer - http://api.jqueryui.com/tooltip/#option-content
Use

There shouldn't be any ; character.
if you are using jquery-ui 1.11.4:
var tooltip = $.widget( "ui.tooltip", {
version: "1.11.4",
options: {
content: function() {
// support: IE<9, Opera in jQuery <1.7
// .text() can't accept undefined, so coerce to a string
var title = $( this ).attr( "title" ) || "";
// Escape title, since we're going from an attribute to raw HTML
Replace--> //return $( "<a>" ).text( title ).html();
by --> return $( "<a>" ).html( title );
},
AngularJS with Bootstrap UI Tolltip (uib-tooltip), has three versions of tool-tip:
uib-tooltip, uib-tooltip-template and uib-tooltip-html
- uib-tooltip takes only text and will escape any HTML provided
- uib-tooltip-html takes an expression that evaluates to an HTML string
- uib-tooltip-template takes a text that specifies the location of the template
In my case, I opted for uib-tooltip-html and there are three parts to it:
configuration
controller
HTML
Example:
(function(angular) {
//Step 1: configure $sceProvider - this allows the configuration of $sce service.
angular.module('myApp', ['uib.bootstrap'])
.config(function($sceProvider) {
$sceProvider.enabled(false);
});
//Step 2: Set the tooltip content in the controller
angular.module('myApp')
.controller('myController', myController);
myController.$inject = ['$sce'];
function myController($sce) {
var vm = this;
vm.tooltipContent = $sce.trustAsHtml('I am the first line <br /><br />' +
'I am the second line-break');
return vm;
}
})(window.angular);
//Step 3: Use the tooltip in HTML (UI)
<div ng-controller="myController as get">
<span uib-tooltip-html="get.tooltipContent">other Contents</span>
</div>
For more information, please check here
Using .html() instead of .text() worked for me. For example
.html("This is a first line." + "<br/>" + "This is a second line.")
Hi this code will work in all browser !!i used
for new line in chrome and safari and ul li for IE
function genarateMultiLIneCode(){
var =values["a","b","c"];
const liStart = '<li>';
const liEnd = '</li>';
const bullet = '• ';
var mergedString = ' ';
const unOrderListStart='<ul>'
const unOrderListEnd='</ul>'
const fakeNewline = '
';
for (let i = 0; i < values.length; i++) {
mergedString += liStart + bullet + values[i] + liEnd + fakeNewline;
}
const tempElement = document.createElement("div");
tempElement.innerHTML = unOrderListStart + mergedString + unOrderListEnd;
return tempElement.innerText;
}
}
This css will help you.
.tooltip {
word-break: break-all;
}
or if you want in one line
.tooltip-inner {
max-width: 100%;
}