Develop Reference

How to position a div based on the position of the page?

I saw it on a site called Medium.com and I want to make it on my website too.
When the shared post is at the top of the page =
first.image
When the shared post is at the bottom of the page =
second.image
I will make this in angular. I hope I have made my request clear.

I would suggest to use Angular Material Menu which looks similar and handels the positioning of the dropdown and is supported by the Angular Material Team.
<button mat-icon-button [matMenuTriggerFor]="menu" aria-label="Example icon-button with a menu">
<mat-icon>more_vert</mat-icon>
</button>
<mat-menu #menu="matMenu">
<button mat-menu-item>
<mat-icon>dialpad</mat-icon>
<span>Redial</span>
</button>
<button mat-menu-item disabled>
<mat-icon>voicemail</mat-icon>
<span>Check voice mail</span>
</button>
<button mat-menu-item>
<mat-icon>notifications_off</mat-icon>
<span>Disable alerts</span>
</button>
</mat-menu>

Bootstrap tooltip not hiding after drag and drop event

I have a JSFiddle here: https://jsfiddle.net/cwgofr84/1/
with the following html:
<div class="container">
<h3>Tooltip Example</h3>
<button class="btn btn-default" data-toggle="tooltip" title="Hover 1">Hover over me 1</button>
<button class="btn btn-primary" data-toggle="tooltip" title="Hover 2">Hover over me 2</button>
<button class="btn btn-info" data-toggle="tooltip" title="Hover 3">Hover over me 3</button>
</div>
where I have three buttons, if I drag one of the buttons so the tooltip displays and then drop and then hover over a different button, it doesn't hide the first tooltip and displays the second. like so:
Is there a way to stop this from happening?

please change your script to:
$('[data-toggle="tooltip"]').tooltip({
trigger : 'hover'
});

Buttons not working at all (Javascript)

I'm getting mad about this.Long story short :
This is the show-cart.php where cart is shown.
When i click Remove button , the event I call works 1 over 10 times about.Below it's the simple code.What's wrong? Why it's not working properly?
<button type="button" class="btn btn-danger">
<span onclick="alert('smth')"; class="glyphicon glyphicon-remove""></span> Remove
</button>
This is my console

Try putting the onclick function on the button element instead of span. The following snippet shows this along with some other cleanup in your code.
<button type="button" class="btn btn-danger" onclick="alert('smth')">
<span class="glyphicon glyphicon-remove"></span> Remove
</button>

vue v-if/v-else does not remove style from buttons

I am using vuejs2 for my webapp with bootstrap.
I have two blocks with v-if and v-else, so only one of those renders. I have bootstrap button in each of these blocks. When I press the button from first of div, second div becomes visible and vice versa.
Problem is when I click button of first div, button of second div appears, but still it is focussed, I want to have a normal button, but it is focussed with outline.
Here is simplified code:
<div id="app">
<div v-if="switc">
<button type="button" class="btn btn-secondary" #click="switc = !switc">
<span >First</span>
</button>
</div>
<div v-else>
<button type="button" class="btn btn-secondary">
<span>Second</span>
</button>
</div>
<br> <br>
<button type="button" class="btn btn-secondary" #click="switc = !switc">
<span>Switch</span>
</button>
</div>
Here is working fiddle, if you press first button, second still shows outline.

I missed this: key in v-if/else in docs. Vue tries to render elements as efficiently as possible, often re-using them instead of rendering from scratch. It seems in my case as well it is using the same component and re-rendering it completely.
To fix it I just need to add key field in each button, like following:
<div v-if="switc">
<button type="button" class="btn btn-secondary" #click="switc = !switc" key="first">
<span >First</span>
</button>
</div>
<div v-else>
<button type="button" class="btn btn-secondary" key="second">
<span>Second</span>
</button>
</div>
Updated fiddle here.

Radio button don't work with UiBootstrap

I need this time a help with this example:
DEMO
You can see that the css on example 1 goes good. When you click on the button the state of the button change (press)
On example 2 i can't do the same. on my app i need that the "radio button" appear on vertical line (i get it).
But when i press the button, when i click out i back to the first state (don't press)
<h4>Exmaple 2</h4>
<div class="btn-group" data-toggle="buttons-radio">
<div class="row" ng-repeat="company in vm_login.decimals">
<button type="button" class="btn btn-primary" ng-model="radioModel.id" btn-radio="company.id">
{{company.desc}}
</button>
</div>
</div>
Can anybody help me?

I got a final version and this is how i need
DEMO
Thanks for all
<div class="btn-group-vertical" >
<button ng-repeat="value in vm_login.options"
class="btn btn-primary"
type="button"
ng-model="vm_login.model"
btn-radio="value.id">
{{value.desc}}
</button>
</div>
<p>texto aqui: {{vm_login.model}}</p>

This worked for me try this approach in one line without using buttons:
<div class="btn-group">
<label class="btn btn-primary" ng-repeat="company in vm_login.decimals" ng-model="radioModel" ng-model="radioModel.id" btn-radio="company.id">{{company.desc}}</label>
</div>

The btn-group classed element expects it's children to be buttons (a btn classed element). Not a div element. Take out the div and move the ng-repeat to the actual button. Now if you want your button to align verticaly you'll need to use btn-group-vertical instead of btn-group as stated in the bootstrap documentation. Here's the update code:
<div class="btn-group-vertical" data-toggle="buttons-radio">
<button ng-repeat="company in vm_login.decimals" type="button" class="btn btn-primary" ng-model="radioModel.id" btn-radio="company.id">
{{company.desc}}
</button>
</div>
Updated Plunker: http://plnkr.co/edit/kVFqNAXisMgkMVqy0WAF?p=preview