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>

change popover to hover

$(document).ready(function () {
Address.initialize();
Note.initializeIndex();
Child.initializeEditBillPayer();
AuditLog.Initialise();
if ($(".aged-debetors").length !==0) {
// set the contant of the popover when document is loaded
$("[data-toggle=popover]").popover();
$('.aged-debetors-label').attr("data-content", $(".aged-debetors").html());
}
});
<span class="label label-info aged-debetors-label" data-toggle="popover" data-placement="auto right" data-html="true" data-content="" data-original-title="" title="">
Current Balance: #Html.DisplayFor(modelItem => Model.TotalUnpaidAmount)
</span>

You can just trigger popover on hover, instead of default click trigger like:
$("[data-toggle=popover]").popover({ trigger: 'hover' });

Customize popover bootstrap with Vue

I have in my HTML a popover, and it's showing after a click. Here is my HTML
<div tabindex="0" class="btn btn-lg btn-danger order"
data-template="<div class='popover'><div class='arrow'></div><div class='popover-body'></div>"
role="button"
data-toggle="popover" data-trigger="focus"
data-content="And here's some amazing content. It's very engaging. Right?"
data-placement="left"
#click="addToCart">Add model
</div>
I have a problem to customize popover width and height and element where I write text in this popover. I probably think that it is content? I want to my popover be wider and higher maybe about: width: 250 ox and height: 300px. How can I do this? Here is my Vue code:
addToCart() {
if (typeof(this.sizeChoose) === 'undefined') {
$('.order').popover(
'show'
)
}
}

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' });

How can I use "div" in Twitter's Popover with multiple buttons?

This solution is ok for one button cases: Is it possible to use a div as content for Twitter's Popover
But in my page I have a bunch of popovers (say 50-100).
So I need to modify this solution.
This wa #jävi's solution:
$(document).ready(function(){
$('.danger').popover({
html : true,
content: function() {
return $('#popover_content_wrapper').html();
}
});
});
Each of my button has its own id.
<a class='danger' data-placement='above' title="Popover Title" href='#'>Click</a>
<div id="popover_div1" style="display: none">
<div>This is your div content</div>
</div>
<a class='danger' data-placement='above' title="Popover Title" href='#'>Click</a>
<div id="popover_div2" style="display: none">
<div>This is your div content</div>
</div>
So how can I rewrite this javascript code snippet to cover all my buttons?

Just fought with this myself. You need to put the id in the element that triggers the popover. Use a custom data attribute like so (called 'data-id'):
<a class='danger' data-id="popover_div1" data-placement='above' title="Popover Title" href='#'>Click</a>
Then you can modify your javascript slightly to grab the data-id attribute value programmatically:
$(document).ready(function(){
$('.danger').popover({
html : true,
content: function() {
return $($(this).attr('data-id')).html();
}
});
});

If you don't want to pollute your source element with another data-* attribute, here is a simple and generic way to use the data-content attribute as text or CSS selector:
$('[data-toggle="popover"]').popover({
html: true,
content: function() {
var content = $(this).data('content');
try { content = $(content).html() } catch(e) {/* Ignore */}
return content;
}
});
You can now use the data-content attribute with a text value:
<a data-toggle="popover" data-title="Popover Title" data-content="Text from data-content attribute!" class="btn btn-large" href="#">Click to toggle popover</a>
...or use the data-content attribute with a CSS selector value:
<a data-toggle="popover" data-title="Popover Title" data-content="#countdown-popup" class="btn btn-large" href="#">Click to toggle popover</a>
<div id="countdown-popup" class="hide">Text from <code>#countdown-popup</code> element!</div>
You can test this solution here: http://jsfiddle.net/almeidap/eX2qd/
...or here, if you are using Bootstrap 3.0: http://jsfiddle.net/almeidap/UvEQd/ (note the data-content-target attribute name!)

You can do it without additional button attributes like this:
http://jsfiddle.net/isherwood/E5Ly5/
.popper-content {
display: none;
}
<button class="popper" data-toggle="popover">Pop me</button>
<div class="popper-content">My first popover content goes here.</div>
<button class="popper" data-toggle="popover">Pop me</button>
<div class="popper-content">My second popover content goes here.</div>
<button class="popper" data-toggle="popover">Pop me</button>
<div class="popper-content">My third popover content goes here.</div>
$('.popper').popover({
container: 'body',
html: true,
content: function () {
return $(this).next('.pop-content').html();
}
});

Store the id of the div containing the popover html inside the rel attribute of the a element
<a rel="popover_div2" ... >click</a>
And then get the rel of the click anchor inside your click listener (not sure how the popover method stores it, but I'm sure it does):
var myRel = $(this).attr(rel);
return $(myRel).html();

For me it has do be
data-id="#popover_div1"
in the HTML for the button (with a # for addressing the id of the div).