I have issues with bootstrap tooltip title when I'm using data-html="true" for the title. I'm using html tags in tooltip title for font styles and line break. For this I used data-html="true". However when i used < (less than) icon, tooltip title text not displayed after less than icon (<)
<html><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.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3>Tooltip Example</h3>
Tooltip
</div>
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</body>
</html>
<html><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.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3>Tooltip Example</h3>
<a href="#" data-html="true" data-toggle="tooltip" data-original-title='title with <br/> special character < less than over me Hooray!'>Tooltip </a>
</div>
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</body>
</html>`
Just give space between special character and word. Othere it will parse as html tags or use <.
Related
try this code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Owl Carousel</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.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="owlcarousel/owl.carousel.min.css">
<link rel="stylesheet" href="owlcarousel/owl.theme.default.min.css">
</head>
<body>
<div class="owl-carousel">
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
</div>
<script>
$(document).ready(function(){
$(".owl-carousel").owlCarousel();
});
</script>
<script src="jquery.min.js"></script>
<script src="owlcarousel/owl.carousel.min.js"></script>
</body>
</html>
I'm trying to use owl carousel in my new project but it seems the owl carousel isn't working, i have tried with the above code dont know where im going wrong please can any one help me so that it will help me to fix the issue, since im new to this field im unable to solve the issue,please can any one help me out in this
remove <script src="jquery.min.js"></script> from last
and initialize Carousel like below
jQuery(document).ready(function() {
jQuery(".owl-carousel").owlCarousel({
});
});
or try this code
jQuery(document).ready(function() {
jQuery(".owl-carousel").owlCarousel({});
});
<!DOCTYPE html>
<html lang="en">
<head>
<title>Owl Carousel</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.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css">
</head>
<body>
<div class="owl-carousel">
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>
</body>
</html>
Suppose the title attribute was used as the text for a tool tip. Is it possible just to change the text, using jQuery?
<!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.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3>Tooltip Example</h3>
Hover over me
</div>
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</body>
</html>
I couldn't get it to change with the option as I believe the api says using title is to tell it what the value should be if the title is not there. I got it to work by changing the title to be data-title and gave the title option as a function that returns this value.
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip({
title: function () {
return this.getAttribute('data-title');
}
});
setInterval(function(){
$('[data-toggle="tooltip"]').attr('data-title', Date.now());
}, 1000);
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<h3>Tooltip Example</h3>
Hover over me
</div>
<!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.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.js"></script>
</head>
<body>
<div class="container">
<h3>Tooltip Example</h3>
<a data-toggle="tooltip" title="Hooray!">Hover over me</a>
</div>
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
$('[data-toggle="tooltip"]').off("mouseenter mouseleave");
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</body>
</html>
why i am not able to get tooltip even if i initializing two times ??
DavidG's comment with logging. Basically you need to completely destroy the tooltip if you want to be able to call tooltip again and have it attach the listeners. By doing calling off you were just removing the listeners but not destroying the tooltip. Therefore when you called tooltip a second time it would not initialize the tooltip again. Because of the following line:
if (!data) $this.data('bs.tooltip', (data = new Tooltip(this, options)))
https://github.com/twbs/bootstrap/blob/v3-dev/js/tooltip.js#L501
<!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.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.js"></script>
</head>
<body>
<div class="container">
<h3>Tooltip Example</h3>
<a data-toggle="tooltip" data-placement="top" title="Hooray!">Hover over me</a>
</div>
<script>
$(document).ready(function(){
console.log("init");
$('[data-toggle="tooltip"]').tooltip();
setTimeout(function() {
console.log("destroy");
$('[data-toggle="tooltip"]').tooltip("destroy");
setTimeout(function() {
console.log("reinit");
$('[data-toggle="tooltip"]').tooltip();
}, 5000);
}, 5000);
});
</script>
</body>
</html>
I removed the duplicate declaration and added a tooltip placement and now it works
<!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.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.js"></script>
</head>
<body>
<div class="container">
<h3>Tooltip Example</h3>
<a data-toggle="tooltip" data-placement="top" title="Hooray!">Hover over me</a>
</div>
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</body>
</html>
Try this:
<!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.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.js"></script>
</head>
<body>
<div class="container">
<h3>Tooltip Example</h3>
<a id="anchor" data-toggle="tooltip" title="Hooray!">Hover over me</a>
</div>
<script>
var handler = function (e) {
$('[data-toggle="tooltip"]').tooltip();
}
$(document).ready(function(){
$('[data-toggle="tooltip"]').off("mouseenter mouseleave",handler);
$('[data-toggle="tooltip"]').on("mouseenter mouseleave",handler);
});
</script>
</body>
</html>
It works, though I believe there might be better solutions if you elaborate more on what exactly it is that you want to do.
I am currently working o a quote APP, Jquery getJson to inflate the elementes. I'm having trouble integrating twitter's share button into my code. For some reason I cannot get it to pick up the text values from the API source when I use the attr function to change the tweet URL data-text value.When I click the tweet button all I got is a new tweet window with the hardcoded text. My intention is to set the quote + author in the text field. Any ideas to make it work? I did a lot of research and experimentation with the tweet event binds but no success
My HTML code:
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<style>
body {
padding-top: 50px;
padding-bottom: 20px;
}
</style>
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/main.css">
<!--[if lt IE 9]>
<script src="js/vendor/html5-3.6-respond-1.4.2.min.js"></script>
<![endif]-->
</head>
<body>
<div id="btn-container" class="container">
<p><a id="btn1" class="btn btn-primary btn-lg" href="#" role="button">Quote Me</a></p>
</div>
<div id="quote-container" class="container">
<blockquote id="quote">Never do anything yourself that you can hire someone else to do, especially if they can do it better.
</blockquote>
<footer id="author">Bill Bernback</footer>
</div>
<div id="share-container" class="container">
Tweet it
</div>
<script async src="http://platform.twitter.com/widgets.js" charset="utf-8"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')</script>
<script src="js/vendor/bootstrap.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
My JS code:
<pre><code>var quote;
var author
$(document).ready(function(){
$(".btn").click(function(){
$.getJSON("http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&_jsonp=?", function(getQuote) {
quote = getQuote[0].content;
author = getQuote[0].title;
$("#quote").html(quote);
$("#author").text(author);
$('.twitter-share-button').attr('data-text',author); // not working
});});});
hi i try to run the basic example of jspanel 2 but the weight is overflow
this is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jsPanel</title>
<link href="src/jsPanel.css" rel="stylesheet">
<link href="src/font-awesome.css" rel="stylesheet">
<link href="src/jquery-ui.min.css" rel="stylesheet" />
<link href="src/styles.css" rel="stylesheet">
<script src="src/jquery-2.1.1.min.js"></script>
<script src="src/jquery-ui-1.11.0.min.js"></script>
<script src="src/jquery.ui.touch-punch.min.js"></script>
<script src="src/jquery.jspanel.js"></script>
<script>
$(document).ready(function(){
$('#sample-basic' ).click(function(){
$.jsPanel();
});
});
</script>
</head>
<body>
<button id="sample-basic" type="button" class="btn btn-primary btn-xs">Try it</button>
</body>
</html>
this is the pluggin
http://jspanel.de/
any jsfiddle example?
Here is the link to your code working in jsfiddle: http://jsfiddle.net/czqa7gu8/
Just apply your css... Or ask what you really need from your css code.