I want buttons to appear inside popover. The problem here is that the html code appears instead of buttons inside popover. I think there's an issue with this code: $('[data-bs-toggle="popover"]').popover('show');
How can I add buttons with button tag inside popover without changing data-bs-toggle to data-toggle?
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div class="container">
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Bottom popover" id="example"> Popover on bottom
</button>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script>
var popString = "";
popString = popString + "<a href='#'><button class='btn btn-primary' id ='checkout'>Checkout</button></a> <button class='btn btn-primary' id ='clearCart'>Clear Cart</button> "
document.getElementById('example').setAttribute('data-bs-content', popString);
$(document).ready(function(){
$('[data-bs-toggle="popover"]').popover('show');
});</script>
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>
$(function() {
$("[data-toggle=popover]").popover({
html: true,
placement:"bottom",
content: function() {
var content = $(this).attr("data-popover-content");
return $(content).children(".popover-body").html();
},
title: function() {
var title = $(this).attr("data-popover-content");
return $(title).children(".popover-heading").html();
}
});
});
body{
width100%;
height:100vh
}
.flex-center{
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="flex-center">
<button class="btn btn-primary" tabindex="0" data-toggle="popover" data-trigger="focus" data-popover-content="#a2">Popover Example</button>
</div>
<div id="a2" class="hidden">
<div class="popover-heading">This is the heading for #2</div>
<div class="popover-body">
This is the body for #2<br> With <b>html</b> content
<button class="btn btn-primary mx-auto">Button</button>
</div>
</div>
You'd need data-bs-html="true" attribute as well for html code to work in the popover.
I tried your code, and as much as I could tell buttons inside the popover aren't working, however anchor tags are. I don't like this approach myself, but that is what I could make work for now. Here's a fiddle: JSFiddle It basically meant converting your buttons in the content to anchor tags.
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover({
placement : 'top',
html : true,
title : 'User Info <a href="#" class="close" data-dismiss="alert">×
</a>',
content : '<div class="media"><img src="images/avatar-tiny.jpg"
class="mr-3" alt="Sample Image"><div class="media-body"><h5 class="media-
heading">Jhon Carter</h5><p>Excellent Bootstrap popover! I really love
it.</p></div></div>'
});
$(document).on("click", ".popover .close" , function(){
$(this).parents(".popover").popover('hide');
});
});
</script>
<div class="wrapper">
<button type="button" class="btn btn-primary" data-toggle="popover">Click
Me</button>
</div>
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Bootstrap CSS -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
<title>Hello, world!</title>
</head>
<body>
<button
type="button"
class="btn btn-lg btn-danger"
data-bs-toggle="popover"
title="Popover title"
data-bs-content="And here's some amazing content. It's very engaging. Right?"
>
Click to toggle popover
</button>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"
></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
-->
<script>
var popoverTriggerList = [].slice.call(
document.querySelectorAll('[data-bs-toggle="popover"]')
);
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl);
});
</script>
</body>
</html>
When you use Bootstrap 5 Use this Script code you can easily Make Popover.
Either You can try jquery but I thinks it's not needed.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script>
<div class="container">Popover Example</div>
$(document).ready(function(){$('[data-toggle="popover"]').popover();});
Related
I am trying to show a modal by calling a JS file function.
<div onclick="UsernameModal.showModal()" style="font-family: 'irsans-medium'; margin-right: 10px;color: #343CF9">some text</div>
The JS file and the function look as the following.
var UsernameModal = UsernameModal || {};
$(document).ready(function () {
UsernameModal.showModal = function () {
console.log("hi");
$('#usernameModal').modal({
backdrop: 'static',
keyboard: false
});
$('#usernameModal').modal('show');
}
.
.
.
}
The log method in the function gets invoked and also the JQuery is working as it goes into the $ sign. And no errors gets shown in the console after executing.
My _Layout.cshtml file is as below.
.
.
.
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/js/bootstrap.js"></script>
<script src="~/js/common.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js">
</script>
<script src="~/js/login.js"></script>
</head>
<body>
#RenderBody()
#RenderSection("scripts", required: false)
</body>
</html>
I do not know why the modal show function does not get executed. And the modal is located as below.
<div class="modal fade" id="usernameModal" tabindex="-1" role="dialog" aria-labelledby="usernameModal" aria-hidden="true">
<div class="modal-dialog center-modal">
<div class="modal-content">
<div class="modal-body">
#await Html.PartialAsync("../../Views/Password/_UsernameModal", new InputModel())
</div>
</div>
</div>
</div>
First, aria-labelledby="usernameModal" needed to be aria-labelledby="usernameModalLabel".
Second, instead of calling twice modal, once with the show argument , then again with some options setup, you can put them all together.
$('#usernameModal').modal({
backdrop: 'static',
keyboard: false,
show: true
});
Third, the order of the loaded css and script matters. The bootstrap css should go first, then the jQuery library, then the popper library (if applicable), finally the bootstrap library.
Fourth, you must be sure all DOM have being loaded prior trying to use them. You can use the jquery's ready, such as:
$(function() {
// Code that will be run after all DOMs in the page are loaded
});
Below is a working example:
$(function() {
$('#btnShowModal').bind('click', () => {
console.log("show modal");
$('#usernameModal').modal({
backdrop: 'static',
keyboard: false,
show: true
});
});
});
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/js/bootstrap.min.js"></script>
<button id="btnShowModal">Show Modal</button>
<div class="modal fade" id="usernameModal" tabindex="-1" aria-labelledby="usernameModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
#await Html.PartialAsync("../../Views/Password/_UsernameModal", new InputModel())
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
I hope this helped you out.
I corrected the order by which the file references where held in my _Layout.cshtml class.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no" />
<title>something</title>
<link href="~/css/bootstrap.min.css" rel="stylesheet" />
<link href="~/css/bootstrap-theme.min.css" rel="stylesheet" />
<link rel="icon" type="image/x-icon" href="~/favicon.ico" />
<link rel="shortcut icon" type="image/x-icon" href="~/favicon.ico" />
<link rel="stylesheet" type="text/css" href="~/css/site.css" />
<link rel="stylesheet" href="~/css/login.css"/>
<link rel="stylesheet" href="~/css/common.css" />
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/js/bootstrap.min.js"></script>
<script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>
<script src="~/js/common.js"></script>
<script src="~/js/login.js"></script>
</head>
<body>
#RenderBody()
#RenderSection("scripts", required: false)
</body>
</html>
I need to put some functions on the header of my site, but the functions just not working...
I'm building my site with AngularJs and Javascript. Next my index.html:
<!DOCTYPE html>
<html ng-app="adminApp">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Admin</title>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link type="text/css" href="app/css/admin.css" rel="stylesheet" />
<link type="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker3.standalone.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Quicksand&display=swap" rel="stylesheet">
<head>
<base href="/">
</head>
<body>
<div ng-include="'app/components/include/header.html'"></div>
<ng-view></ng-view>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-resource.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-cookies.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-sanitize.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.22/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.62/vfs_fonts.js"></script>
<script src="app/app.js"></script>
<script src="app/components/home/admin-home.js"></script>
<script src="app/components/test/test.js"></script>
<script src="app/components/include/header.js"></script>
<script src="app/factories/admin-factory.js"></script>
<script src="app/routes/admin-route.js"></script>
</body>
</html>
As you can see, i'm calling the header file on the ng-include div.
And the my header.html file:
<section class="admin-header">
<div class="row">
<div class="col-lg-9 col-md-9 col-sm-9 col-xs-9">
<a id="admin-logo"><img src="/logo.png" /></a>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 hide" id="login" align="center">
<button type="button" class="btn btn-user" id="jump-btn">
<span class="glyphicon glyphicon-menu-hamburger" aria-hidden="true"></span>
</button>
</div>
</div>
</section>
<div class="menu-out">
<button type="button" class="btn btn-logout" id="logout">Log out</button>
</div>
So, at this point, everything works fine: the header appears on every page. But if i need a function on the logout button, how can i do it?
I've tried creating a home.js file like next one:
(function(){
var head = {
templateUrl: '/app/components/include/header.html',
controller: headCtrl
};
angular
.module('adminApp')
.component('adminHead', head);
headCtrl.$inject = ["$http", "$scope"];
function headCtrl($http, $scope){
$scope.getOut = function(){
alert('Log out');
}
}
})();
And then, added the function on the button with ng-click:
<div class="menu-out">
<button type="button" class="btn btn-logout" id="logout" ng-click="getOut()">Log out</button>
</div>
But the function is not working.
Someone knows why is not working and help me with and example if it's possible, please? If i add the function on the html between script tags works, but i need to find if it's possible with the $scope.
Hope you can help me. Thanx in advance
Declare a controller:
angular
.module('adminApp')
.controller('adminHeadCtrl', headCtrl);
headCtrl.$inject = ["$http", "$scope"];
function headCtrl($http, $scope){
$scope.getOut = function(){
alert('Log out');
}
}
Instantiate the controller with the ng-controller directive:
<div class="menu-out" ng-controller="adminHeadCtrl">
<button type="button" ng-click="getOut()" id="logout">Log out</button>
</div>
For more information, see
AngularJS Developer Guide - Controllers
I'm using Bootstrap 4 in order to create Toasts, I'm currently making a JavaScript function in order to generate a toast.
I have attempted to create elements within the JS file, this didn't properly style it.
index.html
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</head>
<body>
<div>
<div style="position: absolute; top: 50%; right: 50%">
<button type="button" class="btn btn-outline-primary" onclick="newToast('Test', 'Test2')">Example</button>
</div>
<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center" style="min-height: 200px;">
<div style="position: absolute; top: 5px; right: 5px;">
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-delay=3000 id="toast">
<div class="toast-header">
<strong class="mr-auto" id="t-header">
Header
</strong>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="toast-body" id="t-body">
Body
</div>
</div>
</div>
<script src="toast.js"></script>
</body>
</html>
toast.js
function newToast(Header, Body) {
var toast = {}
toast.Header = Header
toast.Body = Body
toast.Hide = function() {
// todo, hide
}
var header = document.getElementById("t-header")
var body = document.getElementById("t-body")
header.innerHTML = toast.Header
body.innerHTML = toast.Body
$('.toast').toast('show');
return toast
}
let toast = newToast("Header Test", "Body Test")
Currently if you make a new toast while one is currently visible it will overwrite the visible one, it should stack however. Bootstrap automatically will stack your Toasts. I believe I need make an entirely new toast and then appendChild, this didn't work for me though.
Add data-autohide="false"
<div class="toast" data-autohide="false" role="alert" aria-live="assertive" aria-atomic="true" data-delay=3000 id="toast">
Toast has to be initialized with jQuery:
<script>
$(document).ready(function() {
$(".toast").toast("show");
});
</script>
Basically, I am creating a list item that generated by jQuery script. I would like to have each list item with an icon chosen from font awesome.
My JS script to create a list and my HTML markup are as below:
<script type="text/javascript">
jQuery(document).ready(function() {
var menuID = 0;
var itemCount = 1;
$('.add-new-id').click(function() {
menuID = $('.menu-id').val();
$('.menu-id, .add-new-id').attr('disabled', 'disabled');
return false;
});
$('#new-parent').submit(function() {
var newParent = $('input.new-parent').val();
$('ol.example:last').append('<li>' + newParent + '<button class="btn btn-default" role="iconpicker"></button></li>');
itemCount++;
$('input.new-parent').val('');
return false;
});
$('body').on('click', 'button[role="iconpicker"]', function() {
$(this).iconpicker();
});
});
</script>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet"
href="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/bootstrap-3.2.0/css/bootstrap.min.css">
<link rel="stylesheet"
href="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/icon-fonts/elusive-icons-2.0.0/css/elusive-icons.min.css"/>
<link rel="stylesheet"
href="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/icon-fonts/font-awesome-4.2.0/css/font-awesome.min.css"/>
<link rel="stylesheet"
href="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/icon-fonts/ionicons-1.5.2/css/ionicons.min.css"/>
<link rel="stylesheet"
href="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/icon-fonts/map-icons-2.1.0/css/map-icons.min.css"/>
<link rel="stylesheet"
href="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/icon-fonts/material-design-1.1.1/css/material-design-iconic-font.min.css"/>
<link rel="stylesheet"
href="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/icon-fonts/octicons-2.1.2/css/octicons.min.css"/>
<link rel="stylesheet"
href="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/icon-fonts/typicons-2.0.6/css/typicons.min.css"/>
<link rel="stylesheet"
href="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/icon-fonts/weather-icons-1.2.0/css/weather-icons.min.css"/>
<link rel="stylesheet"
href="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/bootstrap-iconpicker/css/bootstrap-iconpicker.min.css"/>
<title>Menu</title>
</head>
<body>
<div class="row">
<div class="container">
<div class="col-sm-12">
<form action="" id="new-parent">
<div class="input-group col-sm-4">
<input type="text" class="form-control new-parent" placeholder="Add parent menu">
<div class="input-group-btn">
<button class="btn btn-default add-new-parent" type="submit">
<span class="glyphicon glyphicon-plus"></span>
</button>
</div>
</div>
</form>
<h4>Available Forms:</h4>
<ol class="example">
</ol>
<button class="btn btn-success" type="submit">Save</button>
</div>
</div>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/jquery-sortable-min.js"></script>
<!-- Icon picker script-->
<script type="text/javascript"
src="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/bootstrap-3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript"
src="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/bootstrap-iconpicker/js/iconset/iconset-all.min.js"></script>
<script type="text/javascript"
src="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/bootstrap-iconpicker/js/bootstrap-iconpicker.js"></script>
<!-- end script-->
</body>
</html>
For each list item icon, I would like to use Bootstrap-Iconpicker from this site. However, it does not work fine for each generated list item as you can see from screen shot and on my site.
Popup Icon Picker
By clicking on left and right arrow, or typing in text box, it does not work at all.
Please kindly test it on my demo site:
I could not find to any way to figure it out.
Please kindly help, your suggestion and solution are very much appreciate, thanks.
I'm using bootstrap in my application. I'm trying to show a table of contents as tooltip using data-html="true". but its not working.
Here is my code:
<div title="<table><tr><td>Column1</td><td>Value1></td><tr><td>Column2</td><td>Value</td></tr></table>"
data-html="true" rel="tooltip" style="cursor:pointer;"
class="infobox infobox-red infobox-dark " onclick="OpenDetails(this)">
<div class="infobox-icon"><i class="logo-box boa"></i></div>
<div class="infobox-data"><span class="infobox-data smaller">BOA</span>
<div class="infobox-content">(0/0/0/0 )</div>
</div>
</div>
$(function () {
$("[rel='tooltip']").tooltip();
});
function OpenDetails(Obj){
}
Thank you all in advance for your response.
using
data-original-title
Html:
<div rel='tooltip' data-original-title='<h1>big tooltip</h1>'>Visible text</div>
Javascript:
$("[rel=tooltip]").tooltip({html:true});
Just use the following files if you are going to use all bootstrap functions:
-bootstrap.css
-bootstrap.js
using
<script>
$(function () {
$('[rel="tooltip"]').tooltip();
});
</script>
at the end of the body tag (after jQuery and Bootstrap)
Aslo use
title="Column1 | Column2 <br> Value1 | Value2"
instead of
title="<table><tr><td>Column1</td><td>Value1></td><tr><td>Column2</td><td>Value</td></tr></table>"
the final version could be like this:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css"
integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l"
crossorigin="anonymous"
/>
<title>Hello, world!</title>
</head>
<body>
<div
title="Column1 | Column2 <br> Value1 | Value2"
data-html="true"
rel="tooltip"
style="cursor: pointer"
class="infobox infobox-red infobox-dark"
onclick="OpenDetails(this)"
>
<div class="infobox-icon"><i class="logo-box boa"></i></div>
<div class="infobox-data">
<span class="infobox-data smaller">BOA</span>
<div class="infobox-content">(0/0/0/0 )</div>
</div>
</div>
<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
<script
src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns"
crossorigin="anonymous"
></script>
<script>
$(function () {
$('[rel="tooltip"]').tooltip();
});
</script>
-->
</body>
</html>