Develop Reference

Passing parameter to javascript function form HTML but using ejs

I have the current code in my 'index.ejs' file. I would like to pass the item as a parameter to the deleteItem() and updateItem() functions. However, simply writing item is not working.
<% items.forEach((item) => { %>
<li class="list-group-item">
<span class="description"><%= item %></span>
<button class="btn btn-default btn-xs pull-right" id="delete-button" onclick="deleteItem()">
<i class="glyphicon glyphicon-trash"></i>
</button>
<button class="btn btn-default btn-xs pull-right" id="update-button" onclick="updateItem()">
<i class="glyphicon glyphicon-pencil"></i>
</button>
</li>
<% }) %>
To be specific, I want the individual items in the forEach loop to be passed when their buttons are clicked. I am using embedded javascript as you can see.
I have looked up answers saying one needs to make use of document.getElementById(), but I tried implementing it and it didn't work. Not sure if I did it correctly, though.

Is it possible to display the description of a button when hovered over?

In my Angular program, I want to display a string of text that says what the button does whenever you hover over the button.
How do I do this?
My mouse is hovering over the google button.
Here's my html code for one of my buttons if it helps:
<button [disabled]="!isDisabled" name="enable" class="btn btn-default btn-margin" (click)="toggleDisabled()"><i class="fa fa-pencil" aria-hidden="true"></i></button>

You can use title
<button [disabled]="!isDisabled" name="enable" class="btn btn-default btn-margin" (click)="toggleDisabled()" title="Something"><i class="fa fa-pencil" aria-hidden="true"></i></button>

did you try the title attribute?
title="hello world"
example here
http://w3schools.com/tags/tryit.asp?filename=tryhtml5_global_title

add
title="my tooltip text"
or
[title]="aPropertyWithTooltipContent"
see also tooltips for Button

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

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