Tool Tip with dynamic value in drop down - html

On other html component like buttons or attribute data-toggle tool-tip with unique design are working fine see here link below as reference:
https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_tooltip&stacked=h
However If I'm going to implement to dynamic dropdown or simple component the design from the tooltip will be gone and it will become plain, something like this:
<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.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('[data-toggle="tooltip"]').tooltip();
});
</script>>
<select>
<option data-toggle="tooltip" title="Hooray1">Hooray1</option>
<option data-toggle="tooltip" title="Hooray2">Hooray2</option>
<option data-toggle="tooltip" title="Hooray3">Hooray3</option>
</select>
Any suggestion or comment how to have unique design tooltip on the dropdown. My aim is to have a tooltip with combination of text and image when the user hover for each value on the dropdown. TIA

As per bootstrap Documentation, you need to include popper.min.js before bootstrap.js for:
Tooltips and popovers for displaying and positioning (also requires Popper.js)
Dropdowns for displaying and positioning (also requires Popper.js)
Bootstrap Documentation: https://getbootstrap.com/docs/4.2/getting-started/introduction/#js
I got something similar to what you want, check here: https://stackoverflow.com/a/3314790/11171286

$('a[data-toggle="tooltip"]').tooltip({
animated: 'fade',
placement: 'top',
html: true
});
.avatar {
vertical-align: middle;
width: 50px;
height: 50px;
border-radius: 50%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Simple Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<a href="#" data-toggle="tooltip" title="<img class='avatar' src='https://www.w3schools.com/w3images/avatar5.png'/> <span><br>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry.</span>">
Anonymous
</a>
why don't you try the latest bootstrap version but it's okay try this... Hope this will help

Related

JQueryUI dialog moving outside browser window

I am using JQueryUI with dialogextend on a boostrap template (Shards UI).
I have the issue that the dialog can move outside the window and makes scrollbars to the webpage:
Does anyone know what can cause this? I've tried to include the CSS and JS in different orders, but that doesn't help.
Here is the minimal code on which the issue still appears:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">s
</head>
<body class="h-100">
<div id="testdialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
<div class="container-fluid">
<div class="row">
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#testdialog" ).dialog({
resizable: true,
closeText: "",
height: "auto",
width: 400
});
$('.ui-dialog').css('z-index',9999);
} );
</script>
</body>
</html>
Thanks for the replies.
Solved it.
I was using a different version of the JS file and CSS file. Using the same version works.

How to show X (Clear) in Chrome INPUT with type Search while using bootstrap?

I am trying to show an Input tag of type Search. I am also using bootstrap. But when I use bootstrap.min.css, the Chrome browser no longer shows the "Clear" or [X] at the end of the box. Looks like Chrome user agent stylesheet overwriting my site style. I am not understanding why it is happening.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
</head>
<body>
<label for="gsearch">Search:</label>
<input type="search" placeholder="Search anything" id="gsearch" name="gsearch">
</body>
</html>
In properties I see something like this:
Here is the fiddle link: https://jsfiddle.net/z1ujworf/1/
If I remove the line <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> , the code creates input tag with "Clear" or [X] at the right end (When we type something in the input field). But I want to use bootstrap and its styling. Is there any way to achieve it?
This happens because bootstrap (from normalize.less) overrides the default user agent styles.
You can override this from your CSS like below
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration {
-webkit-appearance: searchfield-cancel-button !important;
}
Working sample (tested in chrome)
input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration {
-webkit-appearance: searchfield-cancel-button !important;
}
<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>
<body>
<label for="gsearch">Search:</label>
<input type="search" placeholder="Search anything" id="gsearch" name="gsearch">

Importing Bootstrap from CDN, not animating

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Appraisal</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=VT323" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
</head>
<body>
<header>
<h1 class="animated bounceInUp">dummy text</h1>
<hr>
<h4>portfolio</h4>
</header>
<div class="slides">
</div>
<div class="skills">
</div>
<div class="certs">
</div>
<footer>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
I am trying to import Bootstrap from the cdn links provided on the site. I believe I have done everything correctly, however the animations tied to the h1 tag in the header will not animate. Can anyone see anything that is wrong?
The animation you're tying to achieve is with MDBootstrap (Material Design for Bootstrap), and it isn't included with the base Bootstrap files. To use the animation methods you want, include
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.3.2/css/mdb.min.css">
after your Bootstrap CSS files, and include
<script src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.3.2/js/mdb.min.js"></script>
after your current scripts at the end of the body content. That should be all you need to achieve the animations!
Dynamically generate animations using jQuery
You can also dynamically generate your animations by using the addClass jQuery method:
<script>$(document).ready(function(){ $("h1").addClass("animated bounceInUp"); });</script>
You forgot to import the CDN for Animate.css. Add this into your <head>.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
Your browser is literally seeing animated bounceInUp as
Huh? What is this "animated" and "bounceInUp"? Oi! Developerrrr!? Hello! What are these? - Your browser.
put this code in script tag
wow = new WOW({
boxClass: 'wow', // default
animateClass: 'animated', // default
offset: 0, // default
mobile: true, // default
live: true // default
})
wow.init();
and add this class="wow" in your html component

Create Bootstrap Tooltip

I have this short sample:
link
CODE HTML:
Hover over me
asda
link exampe
do not understand why the W3Schools example is different from mine.
I put virtually the same code and have implemented bootstrap library.
Can you please tell me what the problem is and what example shows the two different?
They are using this code to attain that result unlike your one line of code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<a type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</a>
</div>
<script>$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
</script>
</body>
</html>
The important thing to note is this part
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
AND this API:
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
So I used their and found out that when you remove the above javascript code the result is same as yours. So add the above script element to your code and link the bootstrap js library and Bootstrap-combined.css.
To get the tooltip above the text use this code:
Hover
Doing so will give you the same result as there
For more reference use this link
Add data-placement attribute
Hover over me
Here is the bootstrap documentation for Tooltip
http://getbootstrap.com/javascript/#tooltips

Fixed size of a text box on multiselect and add scrollbar?

I have kendo multiselect on dropdown when a user selects values, my text box increases. How can I set a fixed size for the text box on multiselection, and add a scrollbar instead of textbox overflow, so users can see all the selected values?
HTML
<div class="col-md-8 ">
<select kendo-multi-select k-options="riskCauseOptions"
data-text-field="'text'" data-value-field="'id'"
ng-model="riskDTO.rskCausCtgyToRiskKyList"
size=2
required validationMessage="Risk Cause is required"></select>
</div>
Please try with the below code snippet.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.dataviz.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1411/js/kendo.all.min.js"></script>
<style>
.col-md-8 k-multiselect-wrap {
max-height: 50px !important;
overflow: auto !important;
}
</style>
</head>
<body>
<select id="optional" multiple="multiple" data-placeholder="Select attendees...">
<option>Steven White</option>
<option>Nancy King</option>
<option>Nancy Davolio</option>
<option>Robert Davolio</option>
<option>Michael Leverling</option>
<option>Andrew Callahan</option>
<option>Michael Suyama</option>
<option>Anne King</option>
<option>Laura Peacock</option>
<option>Robert Fuller</option>
<option>Janet White</option>
<option>Nancy Leverling</option>
<option>Robert Buchanan</option>
<option>Margaret Buchanan</option>
<option>Andrew Fuller</option>
<option>Anne Davolio</option>
<option>Andrew Suyama</option>
<option>Nige Buchanan</option>
<option>Laura Fuller</option>
</select>
<script>
$(document).ready(function () {
var optional = $("#optional").kendoMultiSelect().data("kendoMultiSelect");
});
</script>
</body>
</html>