We Keep Coding

Focus event for button doesn't fire on iPad

I want to add a bootstrap popover to my site. It should show up, when the user pushes a button by using the focus event. This works on the Desktop, but not on the iPad. It seems like Safari on iOS doesn't raise the focus event for buttons altogether.
As a workaround, I replaced the button with an a tag. This does work, but gives some other issues like a lack of the disabled state without adding a specific class.
<a class="btn btn-outline-secondary" id="ap-btn-selectColor" data-toggle="popover" role="button">
<i class="fa" style="background-color: rgb(140, 181, 255); width: 16px" id="ap-fgColorSelection"> </i>
</a>
<button type="button" class="btn btn-outline-secondary" id="ap-btn-selectBorderColor" data-toggle="popover">
<i class="fa" style="background-color: rgb(0, 51, 142); width: 16px" id="ap-bdColorSelection"> </i>
</button>
$('[data-toggle="popover"]').popover({
content: function () {
return $someElement;
},
placement: 'auto',
html: true,
trigger: 'focus'
});
In my example, the popover works for the first element, but not for the second.
Is there a way to enable the focus event for buttons on iOS?

The solution was quite simple. You simply can't use a button on an iOS device, because it doesn't have a focus event. Instead, you should use an a tag with role="button" and a valid tabindex setting.
<a role="button" id="ap-btn-selectBorderColor" class="btn btn-outline-secondary" data-toggle="popover" tabindex="1">
<i class="fa" style="background-color: rgb(0, 51, 142); width: 16px" id="ap-bdColorSelection"> </i>
</a>

Bootstrap-Tour RTL Popover position

I am using RTL bootstrap CSS 3.3.7 version with Bootstrap-Tour 0.11.0 version.
The popover element doesn't appear close to the appropriate element, but is positioned to the right.
This problem happens only when I use RTL Bootstrap CSS.
This is the code I currently have:
var tour = new Tour({
template : '<div class="popover" role="tooltip"> <div class="arrow"></div> <h3 class="popover-title"></h3> <div class="popover-content"></div> <div class="popover-navigation"> <div class="btn-group"> <button class="btn btn-sm btn-default" data-role="prev">« הקודם</button> <button class="btn btn-sm btn-default" data-role="next">הבא »</button> <button class="btn btn-sm btn-default" data-role="pause-resume" data-pause-text="Pause" data-resume-text="Resume">עצור</button> </div> <button class="btn btn-sm btn-default" data-role="end">צא מעזרה</button> </div> </div>',
steps : [{
element : "#pop1",
title : "Title of my step",
content : "Content of my step",
backdrop : true,
backdropPadding : 3
},
{
placement : "top",
element : "#pop2",
title : "Title of my step",
content : "Content of my step",
backdrop : true,
backdropPadding : 3
}
]
});
JSFiddle Link: https://jsfiddle.net/DUKEiLL/z6qzzsjj/

bootstrap-tour doesn't seem to have rtl support for the moment, even if you manage to position the popover in the right way, you'll still have the navigation with keyboard arrows messed (inverted).
I won't recommand using bootstrap-tour in rtl pages

truncate javascript multiple lines not working

I am using truncate.js (https://github.com/jeffchan/truncate.js) to put ellipsis into a text when it overflows. It is not working when I am following the demo right I think. Here is my code:
CSHTML File:
<div id="yammerDiv">
<div id="yammerHeader">
<img src="https://upload.wikimedia.org/wikipedia/commons/1/1f/Yammer_logo.png" alt="Yammer" height="20px;" width="50%">
</div>
<div id="yammerMessages" data-truncate-lines="3" data-toggle="modal" data-target="#myModal" style="margin-top: 25px;">
<img id="loading-gif" src="http://i559.photobucket.com/albums/ss36/madszckey01/speakker/buffering.gif">
<span id="message"></span>
<p id="sender"></p>
</div>
<div id="yammerButtons" style="display:none">
<button id="previous" type="button" class="btn btn-default btn-xs" aria-label="Left Align" onclick="onPrevious()">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
</button>
<input type="checkbox" id="myCheck" onclick="autoscroll()" data-toggle='tooltip' data-placement='bottom' data-original-title="Auto-Scroll" class='checkbox'>
<button id="next" type="button" class="btn btn-default btn-xs" aria-label="Right Align" onclick="onNext()">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
</button>
</div>
JavaScript inside the CSHTML file:
$('#yammerMessages').truncate({
lines: 3,
lineHeight: 1.5
});
I want to truncate the text in the yammerMessages div and its not working as the text just continues through the height limit of the width.
EDIT:
I have got the truncate method working but my content inside the span element 'message' reloads text often and how do I keep truncating it every time it changes?
$('#yammerMessages').truncate({
lines: 7,
lineHeight: 14
});
This truncates the text inside the div once, but when the content changes in 'message', it won't let me truncate again.
SOLVED:
Look for my answer below.

Since this library would not solve my problem, I just ended up using dotdotdot jquery library which solved my issue.
To truncate for the div, I used the dotdotdot method:
$("#text-wrapper").dotdotdot({ wrap: 'letter' });
Then when the text changes inside the div, I use the trigger method which then deletes the truncation of the element it was called on:
$("#text-wrapper").trigger("destroy");
Then I simply truncate again the new text loaded inside the div:
$("#text-wrapper").dotdotdot({ wrap: 'letter' });

(Bootstrap 3.1.1) popover on show reset my addClass?

<button id="search-district" type="button" class="btn btn-sm btn-success" data-toggle="popover" data-placement="bottom" title="<a href='#' class='pull-right popover-close' onclick='$("#search-district").popover("hide");'>×</a>" data-html="true" data-content="
<a id='id_district_100' href='#' onclick='ChangeDistrictSelection("100");'>District123</a>
"><span class="glyphicon glyphicon-plus"></span> Dsitricts <span id="district_bracket" style="display:none;">[<span id="count_districts_">0</span>]</span></button>
and JavaScript function
function ChangeDistrictSelection(id)
{
$('#id_district_'+id).addClass("selected");
}
When I'm clicked to District123, my JavaScript add Class "active"... But, after that when action popover on show, popover reset my class :(

What ever your selected css is you have to mark it with !important in order to override existing one.
Example
.selected {
background-color:gray !important;
}

Your question is not clear much. Please explain it we can help you so.
And also please not this also.
You are passing '100' to the function using onclick and then you are trying to get the element by id. But is already is equal to the id.
WHY??
You are doing wrong here. See your codes.
<a id='id_district_100' href='#' onclick='ChangeDistrictSelection("100");'>District123</a>
and you function also have a look
function ChangeDistrictSelection(id) {
//id will be 100 as your code.
//again you are trying to get the element by id. see your html <a id="id_district_100">
//It's already equal to $('#id_district_'+100) - why do you passing that 100 and trying to get element by id??
$('#id_district_'+id).addClass("selected");
}
If you want to add the class to that element you can use this.
function ChangeDistrictSelection(id){
//alert(id);
$(id).addClass('selected');
}
In html pass like that
<a id='id_district_100' href="#" onclick='ChangeDistrictSelection(id)'>District123</a>

ok... v2
html:
<button id="search-district" type="button" class="btn btn-sm btn-success" data-toggle="popover" data-placement="bottom" title="<a href='#' class='pull-right popover-close' onclick='$("#search-district").popover("hide");'>×</a>‌​" data-html="true" data-content=" <a id='id_district_100' href='#' onclick='ChangeDistrictSelectionCss("100");'>District123</a> ... ">
js:
function ChangeDistrictSelectionCSS(id){
$('#id_district_'+id).css("color","red");
}
It's work, but when clicked button (id="search-district") again, css color is not red

How to get a tooltip to appear in a popover?

On my machine, this code produces a tooltip on hover over a bootstrap glyphicon:
<span class="glyphicon glyphicon-info-sign tt" data-toggle="tooltip" data-placement="top" title="" data-original-title="Tooltip on top"> </span>
However when I stack the tooltip inside a popover, the code used to generate a tooltip on its own no longer produces a tooltip:
<a href="#" class="example" data-toggle="popover" >Experiment</a>
<div id="popover_content_wrapper" style="display: none">
<a href="">
<span class="glyphicon glyphicon-info-sign tt" data-toggle="tooltip" data-placement="top" title="" data-original-title="Tooltip on top"> </span>
</a>
</div>
Here's how I'm triggering the popover and tooltip in the javascript (below these html elements)
<script>
$('.tt').tooltip();
$('.example').popover({
trigger: 'hover click',
html: true,
content: function() {
return $('#popover_content_wrapper').html();
},
placement: 'top',
delay: { show: 500, hide: 1000 }
});
</script>
Any ideas on how to get a tooltip to appear on an element inside a popover?

The problem is that the .tt classed element that appears in your popover is not the same one used to bind .tooltip() to.
You need to use the delegation model via the selector option, eg
$(document).tooltip({
selector: '.tt'
});
Demo here - http://jsfiddle.net/jAtqW/