I am using Bootstrap Popover plugin: https://www.w3schools.com/bootstrap/bootstrap_popover.asp
I've been asked to make both hover and click works. But I can't set two values in the data-trigger attribute.
<a tabindex="0" role="button" data-toggle="popover" data-trigger="popover"
data-placement="top" title="Click and Hover!"
data-content="<b> Click and Hover works! </b>" data-html="true">
Click or hover here
</a>
How do I make both the Hover / Click work?
you can specify multiple triggers simply by separate them by a space like this :
<a href="#" data-toggle="popover" title="Popover Header"
data-trigger="click hover"
data-content="Some content inside the popover">Toggle popover</a>
Related
<button class="fa fa-caret-down font-size-18px" style="border: none"
#pop="bs-popover"
[popover]="fil"
placement="bottom right"
[adaptivePosition]="true"
[outsideClick]="true"
(keydown)="keydownEvent($event,pop)">
</button>
In my angular application, I am using a button which will open a popover. But I want it to be a tag or something other than a button because the button will be activated when we press space or enter keys which I don't want. The code should be like this:
<i class="fa fa-caret-down font-size-18px" style="border: none"
#pop="bs-popover"
[popover]="fil"
placement="bottom right"
[adaptivePosition]="true"
[outsideClick]="true"
(keydown)="keydownEvent($event,pop)">
</i>
But this will not trigger the keydown event. What might be the reason for it what are the alternatives? Thanks
so I'm currently trying to disable a button but also have the same button type. If anyone can help me with examples it would be great! Thanks so much to the ones that help! :D
<!--- I want this one to be the working button. --->
<a
class="project-link"
target="_blank"
href="/gimkit"
>Use <i class="fas fa-check-circle"></i> </a
>
<!--- this one to be the button that doesn't work. (disabled)
--->
<a
class="project-link"
target="_blank"
href="/support"
>Help <i class="fas fa-question-circle"></i> </a
>
I want something like this, but have the Help Button with a question mark to be faded instead of the normal button.
https://i.stack.imgur.com/QXRMz.png
For <button> element, just add the disabled property:
<button type="button" disabled>Help</button>
I think the button-elements answer is the best solution.
But if you really want to stick with the Anchor-Tags, you could also try to add a helper css class. For example you can use something like this:
<a
class="project-link disabled"
target="_blank"
href="/support"
onclick="return false;"
>Help <i class="fas fa-question-circle"></i> </a
>
And the css of the .disabled class could look like this:
.project-link.disabled{
opacity:0.5;
}
I have a button that I want if user click the button, user will download an image directly.
Here's the code
<a href="/path_to_image/" class="btn btn-xl btn-info btn-full-width" role="button" aria-pressed="true" style="margin-left:10px; width: 50px;" data-toggle="tooltip" data-placement="top" title="Download Image" download>
<i class="fi-br-download" style="display:contents; text-align:center;font-size:1rem"></i>
</a>
The problem is when user click the button, the image is not download, but only show the image on browser.
Is there any solution ?
download only works for same-origin URLs, or the blob: and data: schemes.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a
I have this piece of code:
<button name='link' onclick="window.location.href = 'Text.html';"
style="cursor:pointer" class='Text' value='Text.html' title='Text'>Text</button>
On click it will take you to one of my sub-sites. I wanted it to open the link in a new tab so I tried putting target='_blank' in the button tag, but it didn`t work. If possible I would prefer to use HTML.
Thanks
What about using form
<form action="//example.com/Text.html" target="_blank">
<button type="submit">Text</button>
</form>
This can take to different site or any of your sub-site.
Replace button tag with a
Text
Edit: While the original answer works, it isn't in line with the W3C HTML5 specs. An alternative would be to edit the JavaScript in the onclick attribute to open the link in a new tab.
<button
onclick="window.open('Text.html', '_blank')"
name="link"
style="cursor: pointer"
class="Text"
value="Text.html"
title="Text"
>
Text
</button>
You could wrap an <a> tag around the button instead.
<a href="Text.html" target="_blank">
<button
name="link"
style="cursor: pointer"
class="Text"
value="Text.html"
title="Text"
>
Text
</button>
</a>
When i navigate through Tab key in my jsp. button in my page are not getting highlighting (i.e it doesnot focus on buttons with dotted line). but it focus on checkbox and radio button. As i am not allowed to change to input type="button" or button. what is the use of aria-disabled="false" ?
<body>
<a href="javascript:submitForm('reset');" class="ui-button-default ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false">
<span class="ui-text-only">RESET</span></a>
</body>
Try to put this attribute:
tabindex="K", where "k" is the number of how many times You have to press the TAB key to highlight that link.