I'm trying to add in a tooltip to an existing splash page. I just plugged in all the relevant Bootstrap docs, but can't seem to figure out why I can't get a tooltip showing on the small grey link center left of this page - http://wearepage.com/absorb/
Can anyone help? Seems like I haven't plugged in the bootstrap.js file properly, but I can't figure out what's missing.
Thanks
Try this:
Initilize the tool tip in script
$('#YourButtonID').tooltip();
HTML:
<button id="btn" type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
DEMO
Related
I am trying to display content when hovering over an icon.
When I hardcode it in my HTML it works fine.
But when I try to render the same thing through javascript, nothing happens on hover.
So this works when written in HTML directly:
<i id="iconid"
class="ki flaticon2-information icon-lg ml-3 text-dark"
data-container="body"
data-toggle="popover"
data-html="true"
data-content="hello"i>
This does not work
<!--html-->
<i id="iconid"
class="ki flaticon2-information icon-lg ml-3 text-dark"
data-container="body"
data-toggle="popover"
data-html="true"
i>
<!--javascript-->
document.getElementById("iconid").setAttribute("data-content", "hello");
When I inspect the rendered code, everthing seems exactly the same in both cases, but in 2nd case nothing happens on hover.
Thanks for any help!
If you use bootstrap, you might want to call popover event manually after manipulating element by JS.
$('[data-toggle="popover"]').popover()
I think issue is, by the time you call your JS manipulation, bootstrap already finished binding events for the elements. So it got left behind.
I want to go through the code of advanced popup window just like godaddy's popup (see the picture)
I got following code but it's very simple.
<script type="text/javascript">
function MM_openBrWindow(theURL,winName,features) { //v2.0
window.open(theURL,winName,features);
}
</script>
</head>
<body>
<a href="#" onclick="MM_openBrWindow('popup.html','','scrollbars=yes,width=700,height=700')">click me
</a>
For pure educational purposes only, I tried to grab the javascript files and html files for this popup window. But couldn't do it via firebug or any other site grabber. Can someone make or grab the files and post a sample code please which will show a popup exactly as the popup shown in the picture for educational purposes. And the background should be blurred like in the picture.
I know html, but have very little knowledge about javascript/jquery.
P.S : The link to the popup window https://sg.godaddy.com/ and the the clickable text is "* View product limitations and legal policies" and location of the clickable text is bottom of the page.
Regards
simply place the button to text . try it works..!
http://www.w3schools.com/bootstrap/bootstrap_modal.asp
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
to
<span type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</span>
I am trying to use bootstrap tooltips - but currently I cannot get them to display. I've followed all the instructions on the Bootstrap Docs guide, but they still aren't working. Is there something I might be missing?
HTML:
<button class="btn btn-white btn-sm" data-toggle="tooltip" data-placement="left" title="Refresh inbox"><i class="fa fa-refresh"></i> Refresh</button>
<button class="btn btn-white btn-sm" data-toggle="tooltip" data-placement="top" title="Mark as read"><i class="fa fa-eye"></i> </button>
<button class="btn btn-white btn-sm" data-toggle="tooltip" data-placement="top" title="Mark as important"><i class="fa fa-exclamation"></i> </button>
<button class="btn btn-white btn-sm" data-toggle="tooltip" data-placement="top" title="Move to trash"><i class="fa fa-trash-o"></i> </button>
JS:
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
And a code pen can be found here:
http://codepen.io/anon/pen/LpzPxR
My initial guess was that something was wrong with the CSS but I can't seem to get it to work in the pen either.
EDIT: I've fixed the issue in the codepen but the actual template is still displaying incorrectly - http://i62.tinypic.com/2ik2u6s.jpg
You're almost there: you are just missing jquery, before bootstrap.js.
From bootstrap documentation:
Some plugins and CSS components depend on other plugins. If you include plugins individually, make sure to check for these dependencies in the docs. Also note that all plugins depend on jQuery (this means jQuery must be included before the plugin files)
See forked codepen
NB: I also added font-awesome.css as you have icons from that latter library.
Edit: from this screenshot posted in comment and the conversation, it appeared that OP had also jQuery UI Tooltip, which is conflicting with bootstrap tooltips.
I'm using bootstrap in my project. I would like to use popover inside of modal window, but popover's title look like this:
Here is code I have inside of modal:
<button id="popover-test-in-modal" type="button" class="btn btn-primary"
data-toggle="popover" title="Test for popover"
data-content="And here's some amazing content. Testing popover.">Popover
</button>
<script>
$("#popover-test-in-modal").popover();
</script>
Here is jsFiddle: http://jsfiddle.net/7k5mjw24/
How can I fix it?
Bootstrap Button Link Not Working see code below:
<ul>
<li>
<a href="home.aspx?Id=146">
<button class="btn btn-primary btn">Button Link</button>
</a>
</li>
</ul>
I use firebug for development, is there an easy place to see what javascript events are attached and to which objects such as this button class? find it hard to debug as don't know what code is being called and on what events for bootstrap and other external js files
Or, you can just use a link which looks like a button..
Button Link
Remove a tag and add window.location.href to button onclick
<button class="btn btn-primary btn"
onclick="window.location.href='home.aspx?Id=146'; return false;">
Button Link
</button>