I have a pop hover button. I want to make it's text RTL. How can I do it?
<button
type = "button"
class = "btn btn-success btn-xs pop"
data-container = "body"
data-toggle = "popover"
data-placement = "right"
data-content = "hello world"
data-original-title = ""
title = "">help</button>
add:
style="direction:rtl;"
<button type="button" class="btn btn-success btn-xs pop" data-container="body" data-toggle="popover" data-placement="right" data-content="hello world"
data-original-title="" title="" style="direction:rtl;" >
A paragraph with a right-to-left direction:
<p dir="rtl">Write this text right-to-left!</p>
For your case, and as documented on bootstrap, you have the option to change the popover tempate via the attribute data-template
<div class="popover" role="tooltip" direction="rtl">
<div class="arrow"></div>
<h3 class="popover-title"></h3>
<div class="popover-content"></div>
</div>
In your code, add this attribute and set the direction to rtl both in title and body
<button data-template='<div class="popover" role="tooltip" dir="rtl"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>' ...>
Help
<button>
HTML rtl attribute
bootstrap popovers
try using css, like so
.your-class-name{
direction: rtl;
}
Read the complete reference here
To all folks ending up here, in order to change direction or style text inside bootstrap's tooltip you can enable the HTML rendering inside tooltip using data-html="true" and then adding preferred HTML tags and attributes. Checkout example below:
Step 1 - Displaying plain text in tooltip:
<i class="bi bi-x-circle" data-toggle="tooltip" data-placement="top" title="name=درود"></i>
Step 2 - Creating the desired HTML to show in the tooltip:
<p dir='rtl'><strong>name<strong>=درود</p>
Step 3 - Displaying text with direction and bold style:
<i class="bi bi-x-circle" data-toggle="tooltip" data-html="true" data-placement="top" title="<p dir='ltr'><strong>name<strong>=درود</p>"></i>
- There are also other possible solutions such as editing the CSS class of popover or tooltip, such as this link.
Related
I'm trying to change the href on this element:
"<button onclick="smoothscroll()" class="btn btn-white btn-small" href="#contacto">blah blah <i class="fas fa-chevron-right"></i></button>"
It doesn't have an ID so I tried like this:
document.getElementsByClassName('btn btn-white btn-small')[0].href="https://www.mysite.cl/#"
But it doesn't seem to work.. any ideas? I have other element that works just like I want this button to work:
"<button onclick="smoothscroll()" class="btn" href="#">blah blah</button>"
But I also tried this:
document.getElementsByClassName('btn btn-white btn-small')[0].href="#"
And it doesn't work either
It is not advised to use href as attribute for html button, use this instead..
<a href = '#blablabla'>Scroll to bla bla bla </a>
Then add this css property to the page
html {
scroll-behavior: smooth;
}
The above css will automatically cause smooth scrolling each time a user scrolls by clicking a link.
But if you insist
Try this.. Change your buttons to
"<button onclick="smoothscroll(this)" class="btn btn-white btn-small" href="#contacto">blah blah <i class="fas fa-chevron-right"></i></button>"
Then your smoothscroll() function should look like..
function smoothscroll(button){
button.setAttribute('href', 'Your new link');
}
If you already know what the href is then select it using that.
Since href is not standard to a button Element, to update the href attribute, use setAttribute.
const button = document.querySelector('button[href="#contacto"]')
button.setAttribute('href', "#");
console.log(button)
<button onclick="smoothscroll()" class="btn btn-white btn-small" href="#contacto">blah blah <i class="fas fa-chevron-right"></i></button>
If you have control of the html, then you should look to change the button to an a element instead.
How would I change the text of a toggled class of a button in Angular, so far I have the following to toggle the class, I am using Bootstrap:
html
<!-- toggle button -->
<button type="button" class="btn btn-primary mt-3 ml-3" (click)="status=!status;" [ngClass]="status ? 'btn-info' : 'btn-primary'" [disabled]="clicked">Primary</button>
<!-- toggle button -->
Any idea's?
Your code for ngClass is wrong and i corrected this,
Also if you want to change the text of button you can do it like this :
<button type="button" class="btn btn-primary mt-3 ml-3" (click)="status=!status;" [ngClass]="{'btn-info' : status, 'btn-primary' : !status}" [disabled]="clicked">{{status ? 'Info' : 'Primary'}}</button>
I am using twitter bootstrap to share my post on social media, i have made a link whose popover with some buttons content, but further when i click on buttons in popover, their popover function does not work.
<div class="well text-center">
<button id="but1" title='Popover' class="btn btn-success" rel='popover' data-placement="bottom" data-toggle='popover2'>Share</button>
</div>
<div class='container hide' id='cont'>
<a onclick="Facebook()"
class="btn btn-default">
Facebook
</a>
<a onclick="twitter()"
class="btn btn-default">
Twitter
</a>
<a class="btn btn-default"
data-placement="bottom" data-toggle="popover" data-title="Login" data-container="body"
type="button" data-html="true" href="#" id="login">
Email
</a>
</div>
<div id="popover-content" class="hide">
<form class="form-inline" role="form">
<div class="form-group">
<input type="text" placeholder="Name" class="form-control" maxlength="5">
<button type="submit" class="btn btn-primary" onclick="EmailToSomeOne();">Send</button>
</div>
</form>
</div>
and the js
$('#but1').popover({
html: true,
content: $('#cont').html()
});
$("[data-toggle=popover]").popover({
html: true,
content: function() {
return $('#popover-content').html();
}
});
function Facebook(){
alert('share on facebook');
}
function twitter(){
alert('share on twitter');
}
function EmailToSomeOne(){
alert('Email to send');
}
for more clearing i have created a fiddle also.
Your code works fine. Its just a jsFiddle setting issue.
In your fiddle select no wrap (head) in the dropdown on the left, click Run and it will work.
See example
When onLoad is selected your functions are defined within the closure of the $(document).ready(function() {}); only. Thats the reason it shows the error Uncaught ReferenceError: Facebook is not defined (see the console)
BTW, here's an equivalent example on plunkrenter link description here
You can simply bind the buttons with an id like
<a id="Facebook"class="btn btn-default">Facebook </a>
and access it using
$("#Facebook").on('click',function(){
alert('share on facebook');
})
EDIT:
You cannot have nested popover in bootstrap.However you can use the below two approaches
1)You can change the html inside the popover and display your email form
$('.popover-content').html($('#emailform').html())
Please refer to the fiddle attached for this appproach
https://jsfiddle.net/mohit181191/mxstLfnf/
2)You can open a modal on popover button click.
<a data-toggle="modal" data-target="#facebook"
class="btn btn-default">
Please refer to the below fiddle for this approach
http://jsfiddle.net/mohit181191/o35zqy7w/
Bootstrap not support the Nested popover
http://getbootstrap.com/javascript/#modals
Use this :
$('body').on('click',".btn-default", function(){
alert('share on facebook');
});
.btn-default change this to your button default id
I am defining a variable after the page load (storing numerical json data)
I can successfully put this variable in:
<span data-bind="text: extQty"></span>
And when the variable changes it updates the span with the appropriate variable (That works fine).
But it doesn't update my variable within my enable:
<p class="pull-right"><a class="btn btn-primary" data-bind="click: $root.add, enable: pagedList().length < extQty" href="#" title="edit"><i class="icon-plus"></i> Add Extension</a></p>
I need to have the enable effectively disable based on the value that is presented to "extQty". Right now I'm sending 5 to the extQty, and it seems the variable is only updating inside the "text" data-bind rather than the "enable" data-bind.
Knockout enable binding do not work with anchor tags.
So you have 2 solution to this.
Solution 1
<a href='#' title="edit" class="btn btn-primary" data-bind='click: function() {
if(pagedList().length < extQty())
{
//call the desired method from here
}' >
Solution 2
This button displays only when your condition is success and it has click binding
<a class="btn btn-primary" data-bind="click: $root.add, visible: pagedList().length < extQty()" href="#" title="edit">
This button displays only when your negative condition is success and it do not have click binding
<a class="btn btn-primary" data-bind="visible: pagedList().length >= extQty()" href="#" title="edit">
Try using
<p class="pull-right">
<a class="btn btn-primary" data-bind="style: { display: (pagedList().length < extQty) ? 'block' : 'none' }"
href="#" title="edit">
<i class="icon-plus"></i>Add Extension
</a>
</p>
Or else as pointed by #NaveenKumar.. You can use visible attribute...
I have this code in a div:
<div class="user_event my_background">
<%= image_tag("events_pics/boom.png", :class=> 'event_pic_small') %>
<h6 class="event_info">Event_1: Frame: 974</h6>
<a class="btn btn-mini btn-danger pull-right " href="#"><i class="icon-remove"></i></a>
</div>
and I want this to be appended into an other element each time I click on a button. Anyway the main question is, Is there an easy way to create the above div using javascript? for example a function that takes that as an argument and creates it? Thanks
This simple Jquery function will set the html inside the element selected to whatever you want.
$("SomeElement").html("<div class='user_event my_background'>...</div>")
Just specify the element you want to add the html to and the rest of you html as the argument and you are good to go. Hope that helps.
If you can use jQuery then
$(".user_event").clone().appendTo("#MyTargetElement");
Edit:
Instead of creating a the div again and again, I'd recommend that you keep it hidden in some element and get it using that hidden element's id and append it to your target element.
<div id="myhiddenelement" style="display:none;">
<div class="user_event my_background">
<%= image_tag("events_pics/boom.png", :class=> 'event_pic_small') %>
<h6 class="event_info">Event_1: Frame: 974</h6>
<a class="btn btn-mini btn-danger pull-right " href="#"><i class="icon-remove"></i></a>
</div>
</div>
jQuery
("#MyTargetElement").append($("#myhiddenelement").html());
Use this script:
$("body").prepend('<div>').addClass("user_event").addClass("my_background");
function addElement()
{
$(".user_event.my_background").append('<h6 class="event_info">Event_1: Frame: 974</h6>');
$(".user_event.my_background").append('<a class="btn btn-mini btn-danger pull-right " href="#"><i class="icon-remove"></i></a>');
}
Hope this helps! :)
function append_to_what(id)//id can be any css3 selector
{var div=document.createElement('div');
div.innerHTML='<%= image_tag("events_pics/boom.png", :class=> "event_pic_small") %><h6 class="event_info">Event_1: Frame: 974</h6><a class="btn btn-mini btn-danger pull-right " href="#"><i class="icon-remove"></i></a>';
'
div.className='user_event my_background';
document.querySelector(id).appendChild(div);
}
You may want to check Jquery where you can access a div using class name.