Why doesn't the style of the bootstrap tooltip show? - javascript

I am trying to style text in a bootstrap tooltip. My request is rather simple: I want the tooltip text on the first button to appear in red. I use the
data-html="true"
to use HTML in my tooltip. Why isn't it red?
<button data-toggle="tooltip" data-html="true" data-trigger="click" title="<div style='color:red;'>this text should be red</div>">
Press me
</button>
On the same matter, I want the tooltip on the following tooltip to show in the first place. The table environment hides it completely. Is this the same problem?
<button data-toggle="tooltip" data-html="true" data-trigger="click" title="<table><tr><td>this text should appear</td></tr></table>">
Press me 2
</button>
I created a fiddle that shows the problem clearly.
https://jsfiddle.net/ws9z37q2/9/
Any help would be highly appreciated. Thanks in advance!

Give a class to the element and apply the style to the class in CSS.
$(function() {
$('[data-toggle="tooltip"]').tooltip()
})
.red {
color: red
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<button data-toggle="tooltip" data-html="true" data-trigger="click" title="<div class='red'>this text should be red</div>">
Press me
</button>
When I checked the source code of Bootstrap in Github by default it's sanitizing the HTML content the style attribute is not allowed, check here for more info.
So alternately you can make it works by disabling sanitize option(Not recommented).
$(function() {
$('[data-toggle="tooltip"]').tooltip({
sanitize: false
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<button data-toggle="tooltip" data-html="true" data-trigger="click" title="<div style='color:red'>this text should be red</div>">
Press me
</button>

Related

HTML inside bootstrap 5 tooltip

Following the documentation, I need to display some HTML inside a bootstrap 5 tooltip.
However, copy pasta from the doc does not give the expected output.
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
Tooltip with HTML
</button>
Here is a jsfiddle.
Instead of displaying parsed HTML, HTML is parse as text.
How can I display content as HTML instead of text ?
In Bootstrap v5.0 you should use data-bs-html="true".
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
Tooltip with HTML
</button>
Your JSFiddle.

jQuery Tooltips only in HTML Code but not visible

I am trying to get some good looking help buttons on my website with jQuery and tooltips.
However they appear when you search the Element but they don't show.
Here's some code:
<div class="card-header">
<h5 style="float: left">Eckdaten</h5>
<button id="help" type="button" class="btn btn-outline-secondary"
data-toggle="tooltip" data-placement="left"
title="TestTest" style="float: right; padding-left: 8px; padding-right: 8px">
<i class="fas fa-life-ring"> <Hilfe
</button>
</div>
in script section:
$(document).ready(function () {
$('[data-toggle="tooltip"]').tooltip();
});
src files:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.js">
</script>
Whenever hovered, a tooltip appears in the html code but the actual box isn't showing.
Thank you so much for your help!
You have invalid HTML structure there. Your font awesome icon needs to be closed.
Replace <Hilfe with closed </i> will fix the issue.
https://jsfiddle.net/davidliang2008/2dqa1fvu/4/

How to create a bootstrap popover within a bootstrap dropdown?

I created this so far using html, bootstrap, and jQuery v1.12.0, and jQuery UI - v1.10. So far what displays is a button that says "menu". Once you click that button, menu will drop down and display a right-aligned box that says "Popover with data-trigger". Once that happens, I want to be able to click the "Popover with data-trigger" button to popover something using bootstrap. I tried using the onclick stuff, as shown in jquery, but it isn't working. What am I doing wrong?
$(".dropdown-menu").css('margin','50px');
$(function () {
$('[data-toggle="popover"]').popover()
})
$("#popoverData").popover({ trigger: "hover" });
<div class="btn-group" style ="left:1860px;top:-140px;">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Menu
</button>
<div class="dropdown-menu dropdown-menu-right" style="background: rgba(0,0,255,.35);">
<a id="popoverData" class="btn" href="#" data-content="Popover with data-trigger" rel="popover" data-placement="bottom" data-original-title="Title" data-trigger="hover">Popover with data-trigger</a>
</div>
</div>
Actually, I figured out the answer...The thing is I had the right code...
I forgot to put $(document).ready(function() {}); surrounding my popover code, so the code wouldn't run. I think this has something to do with the DOM not being ready? Correct me if I'm wrong guys. This code should work for jquery.
$(document).ready(function() {
$(".dropdown-menu").css('margin','50px');
$(function () {
$('[data-toggle="popover"]').popover()
})
$("#popoverData").popover({ trigger: "hover" });
});

Show tooltip on button click

I currently have the accessible tooltip working on hover. https://jsfiddle.net/lakenney/c1rogqxw/
<!-- Alert -->
<button class="btn btn-xs btn-info gly-radius" data-toggle="tooltip" data-placement="bottom" data-original-title="Click any question mark icon to get help and tips with specific tasks" aria-describedby="tooltip">
<span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span>
<span class="sr-only">Click any question mark icon to get help and tips with specific tasks</span>
<!-- Alert -->
</button>
Now I want to get it to work on Click. I'm following Julien Vernet's example except that I added accessibility markup. https://themeavenue.net/show-hide-element-onclick-using-boostrap-jquery/
... oh and I'm using button instead of href
This is what I have so far:
<button class="btn btn-xs btn-info gly-radius" data-toggle="tooltip" data-placement="bottom" data-original-title="Click any question mark icon to get help and tips with specific tasks" aria-describedby="tooltip">
<span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span>
<span class="sr-only">Click any question mark icon to get help and tips with specific tasks</span>
<!-- Alert -->
</button>
$('[data-toggle="tooltip"]').click(function (event) {
event.preventDefault();
var target = $(this).attr('href');
$(target).toggleClass('hidden show');
});
https://jsfiddle.net/lakenney/c1rogqxw/4/
Add the "trigger" option to your original code:
$(function () {
$('[data-toggle="tooltip"]').tooltip({ trigger: 'click' });
});
jsfiddle
In your second fiddle, you are no longer calling .tooltip() on the button element. You must call that function to instrument the tooltip. By default the tooltip is triggered by hovering over the button. You can change that by providing an options object to the call to .tooltip(). Specifically, you can include the "trigger" option.
You need to do popover instead of tooltip
<button class="btn btn-xs btn-info gly-radius" data-toggle="popover" data-placement="bottom" data-original-title="Click any question mark icon to get help and tips with specific tasks" data-content="Click any question mark icon to get help and tips with specific tasks" aria-describedby="tooltip">
<span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span>
<span class="sr-only">Click any question mark icon to get help and tips with specific tasks</span>
<!-- Alert -->
</button>
Js code
$('[data-toggle="popover"]').popover();
here is the updated fiddle
https://jsfiddle.net/c1rogqxw/5/

Load <div> in javascript

I am facing problem in loading div into my javascript,
My code is:-
$(document).ready(function()
{
$('#example').hide();
$("#myDiv").tooltip({trigger:'hover',placement:'left',html:true,title:'Rate Us'}).popover({trigger:'click',placement:'top',content:$("#example").html(),});
});
<div id="example">
<button type="button" class="btn btn-default btn-circle btn-lg"><i class="glyphicon glyphicon-ok"></i></button>
</div>
I am not able to load button in the example div on popover.
What should I write in content:$("#example").html(), to load example div?
Please help me.
you cannot use content: for html content on popovers without setting html:true
see here for more information about popovers http://getbootstrap.com/javascript/#popovers
jsfiddle http://jsfiddle.net/CsR5Z/1/

Categories