tooltip the data-placement="right" is not working [edit] - javascript

First of all, the tooltip is working for all the direction, top, bottom and left. But for the right is not working.
So I think that maybe is a problem with the CSS or HTML structure. (But the tooltip is in a position absolute, so I don't know why is this happening. )
HTML
<li class="">
<div class="hover-highlight ml-2">
<a class="" href="#">
<i data-toggle="tooltip" title="Dashboard" class="icon-meter"></i>
<span>Dasboard</span>
</a>
</div>
</li>
In the javascript I am doing this:
$(function () {
$('[data-toggle="tooltip"]').tooltip({
placement: 'right'
});
});
Like I said, for any other placement it is working fine. But for the right it broke!
In fact, I don't know why, but it is rendering with the left properties:
<div class="tooltip fade show bs-tooltip-left" role="tooltip" id="tooltip558151" style="position: absolute; transform: translate3d(125px, 207px, 0px); top: 0px; left: 0px; will-change: transform;" x-placement="left">
<div class="arrow" style="top: 8px;" />
<div class="tooltip-inner">Dashboard</div>
</div>
The problem
Okay, I found the problem. looks like automatically bootstrap push your text according to the parent div. For example, if your tooltip is at the right of the window, you can't force it to be placed into the right.
I don't know how to fix this behaviour.
CODE
Please, check the code here:

the problem is the margins of div, take a look:
$(document).ready(function() {
$("body").tooltip({ selector: '[data-toggle=tooltip]',placement: 'top' });
});
.theproblem {
margin-left:140px;
margin-top:140px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div data-toggle="tooltip" title="Gestión de Usuarios" class="theproblem">
Hola mundo
</div>
</div>
</div>
also Fiddle

I struggled with the differences between bootstrap4 using "data-toggle" and "data-placement" and bootstrap5 using "data-bs-toggle" and "data-bs-placement".
https://getbootstrap.com/docs/4.0/components/tooltips/
https://getbootstrap.com/docs/5.0/components/tooltips/

Best solution:
$('[data-toggle="tooltip"]').each(function() {
$(this).data('bs.tooltip').config.placement = 'right';// For dynamic position
$(this).data('bs.tooltip').config.boundary= 'right'; // Used for tooltip boundary range
});

In the event this helps anyone arriving here in future, the fix for a similar issue I encountered was setting the boundary to "window" which prevents the tooltip from being constrained to within it's parent. See https://getbootstrap.com/docs/4.0/components/tooltips/#options for additional options.
<button title="tooltip text" data-toggle="tooltip" data-placement="right" data-boundary="window">

I believe you should put the placement in a data property of the element:
<button data-toggle="tooltip" data-placement="left"> tooltip </button>

You should put the text in a data property of the element
$(function () {
$('[data-toggle="tooltip"]').tooltip({
placement: 'right'
});
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<li class="">
<div class="hover-highlight ml-2">
<a class="" href="#">
<i data-toggle="tooltip" title="Dashboard" class="icon-meter">
<span>Dasboard</span>
</i>
</a>
</div>
</li>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

I had the same problem and it was because the parent div's overflow was set to auto.
So I changed it from overflow: auto to: overflow: visible and that fixed the problem.

Related

JavaScript animate function doesn't work

This is what the code looks like.
<head>
<link type="text/css" rel="stylesheet" href="C:\Users\User\Desktop\css1.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="C:\Users\User\Desktop\js.js"></script>
</head>
<body>
<div id="header_wrap">
<div id="header">
<div id="logo">
LOGO
</div>
<div class="nav">
<a href="http://www.google.se">
Stuff
</a>
<a href="javascript:void(0)">
Other stuff
</a>
<a href="javascript:void(0)">
More stuff
</a>
</div>
<div class="mobile_nav"></div>
<div class="mobile_nav_menu">
<div class="mobile_menu">
<span>Stuff</span>
<span>Other stuff</span>
<span>More stuff</span>
</div>
<div class="mobile_close">
</div>
</div>
</div>
</div>
<div class="image_container">
<div class="inner_content" id="slide1">
<h2>
CONTENTS
</h2>
</div>
<a class="button" href="javascript:void(0)"></a>
</div>
</body>
the .js file contains this code
setTimeout(function(){
$("#slide1").css('opacity', '1');
},800);
setInterval(function(){
$(".button").toggleClass("opacity");
},1000);
//Navigation
$(".mobile_nav").click(function() {
$(".mobile_nav_menu").animate({right: 0});
})
$(".mobile_close").click(function() {
$(".mobile_nav_menu").animate({right: -270});
})
Can anyone help me out with what I'm doing wrong and how it can be fixed?
Thank you! /AJ
UPDATE: The .js loads (tried the alert function), but does not fill the function it should. Original pen can be found on http://codepen.io/yuriylianguzov/pen/qjwEe
One of the problems is that you are trying to reference a javascript file from a physical file path, and not a url (or relative path). You can't use your harddrive path in an html file to include javascript.
<script src="C:\Users\User\Desktop\js.js"></script>
If your javascript is in the same folder as your html, try something like this:
<script src="js.js"></script>
I'm not exactly sure what the expected behavior for the JavaScript is, because it appears to be doing what it is intended to do. If you look at the DOM in the codepen link that you provided the element with the id of 'slide1' has its opacity style set to 1 (see below) and the anchor tag with class of 'button' is getting the class 'opacity' toggled on and off every second (not depicted below, but you can see it happening in firebug).
<div class="image_container">
<div id="slide1" class="inner_content" style="opacity: 1;">
<h2>
We are who we choose to be.
</h2>
</div>
</div>
The other two click handler's are targeting empty elements (the element with class of 'mobile_nav', and the element with class of 'mobile_close') so they aren't going to do anything.
$(".mobile_nav").click(function() {
$(".mobile_nav_menu").animate({right: 0});
})
$(".mobile_close").click(function() {
$(".mobile_nav_menu").animate({right: -270});
})
<div class="mobile_nav"></div>
<div class="mobile_nav_menu">
<div class="mobile_menu">
<span>Projects</span>
<span>Profile</span>
<span>Contact</span>
</div>
<div class="mobile_close"></div>
</div>
I hope this helps!
1) Some of the elements your javascript is acting on don't have any content
2) Change the line $(".mobile_nav_menu").animate({right: 0}); to: $(".mobile_nav_menu").animate({"right": "0"}); and do the same with the other one, though it won't have any functionality, really.
3) your class mobile_nav_menu needs to have css that says position:relative for the attribute "right" to work.
4) I'd recommend moving your mobile_close div outside the mobile_nav_menu div so it doesn't move when you click it
If anyone has stuff to add, please do so.

How to change arrow icon button on click with jquery

I have button icon this.. at click event i want to change it as it .. right now i am applying this code for jquery
<script>
$('div[id^="module-tab-"]').click(function(){
$(this).next('.hi').slideToggle();
});
</sript>
what should change to change left cursor arrow to right cursor arrow in jquery? please help me with code
You can use toggleClass to swtich between two images. Assign each image to a class and switching between classes using toggleClass will change the image on click.
Live Demo
$('div[id^="module-tab-"]').click(function(){
$(this).next('.hi').toggleClass("left-image right-image");
});
here is working demo of your problem
i create a active class which change background-image.
toggling active class fullfill your requirement
here is your css
.tab {
background: url('http://i.stack.imgur.com/dzs9m.png') no-repeat;
padding-left:50px;
}
.tab.active {
background: url('http://i.stack.imgur.com/euD9p.png') no-repeat;
}
.hi {
display:none
}
and here is your JS
(function(){
$('div[id^="module-tab-"]').click(function(){
$(this).toggleClass("active").next('.hi').slideToggle();
});
}());
hey #Jeetendra Chauhan thanx but still not get what i want.. here is anther code of html..
<div id="tab-module-row" style="display:none;">
div class="module-row module-tab module-details pull-right">
<b>Details:</b>
<span class="grey-line"></span>
<div id="module-tab-details" class="hello-sugg">
<img src="images/icons/icon-orangeboxarrow-right.png" class="right"> Some error is here <span class="pull-right">
<img src="images/icons/icon-chat.png" data-toggle="modal" data-target="#commentBox">
<img src="images/icons/icon-alert.png"> </span>
</div>
<div class="hi" id="hi1" style="width: 95%;display:none;">
<span class="grey-line"></span>
<b>Suggested steps:</b><br>
<ol>
<li>Step one to resolve the issue. Try this one first!</li>
<li>Second Step to resolve the issue. Try this one first!</li>
</ol><br>
<img src="images/icons/icon-charcoalarrow.png"> Add Comments<br>
<img src="images/icons/icon-charcoalarrow.png"> Update / Test Data<br> <br>
</div>
<span class="grey-line"></span> </div>
</div>

How to link a complete DIV container?

i have the following div Container (including a background image).
<div class="haus"></div>
how can i link this DIV to an url?
use the <a> tag :
<a href="">
<div class="haus"></div>
</a>
Pretty Easy , like this :
<a href="htps://www.google.com">
<div class="haus">
This is div
</div>
</a>
Working fiddle : http://jsfiddle.net/xhGud/4/
Use this if you want to keep the next element in the same line
<a href="htps://www.google.com">
<div class="haus" style='display:inline-block'>
text
</div>
</a>
or just
<a href="htps://www.google.com">
<div class="haus">
text
</div>
</a>
This is also fine withe some JS work
<div onClick="self.location.href='http://www.google.com'" class="haus"></div>
Surround the div with the a-link tag
<a href="#">
<div class="haus"></div>
</a>
Or you can use onClick
<div onClick="self.location.href='http://www.google.de'" class="haus"></div>
Or a "experimental" way is to add the div a <a> link and call it over jQuery:
<div class="haus">
link
</div>
jQuery Script:
$(".myBox").click(function(){
window.location=$(this).find("a").attr("href");
return false;
});
I would do it the other way around. by making the a to take all the div space. Live Fiddle
That way, it will validate under any doctype.
personally I think it's clearer that way. but, its debatable.
HTML:
<div class="haus">
This is link in the div
</div>
CSS:
.haus
{
background-color: azure;
height: 50px;
}
.haus a
{
display: inline-block;
width: 100%;
height: 100%;
}

draggable disappears on start dragging

I'm trying to make floating panel with
var self = this;
this.$widget = (function() {
var $panel = $("#tmpl-float-panel").tmpl({
title : title
});
//close on click on cross
$panel.find(".ui-dialog-titlebar-close").click(function() {
self.hide();
});
$panel.draggable({
containment : "parent",
handle : "div.ui-dialog-titlebar",
opacity : 0.75
}).appendTo($container);
return $panel;
})();
later I insert content with
this.$widget.find(".ui-dialog-content").append($content);
And here's jquery template used to build panel:
<script id="tmpl-float-panel" type="text/x-jquery-tmpl">
<div class="ui-widget ui-dialog ui-corner-all ui-widget-content float-panel no-select">
<div class="ui-dialog-titlebar ui-widget-header ui-helper-clearfix">
<span class="ui-dialog-title">${title}</span>
<a class="ui-dialog-titlebar-close ui-corner-all" href="#" role="button">
<span class="ui-icon"></span>
</a>
</div>
<div class="ui-dialog-content ui-widget-content">
</div>
</div>
</script>
Here's the question. When I'm trying to drag the panel (clicking on title bar and moving mouse), the whole widget disappears. Can someone tell me why?
UPD: on chrome it do not disappear on click, but somewhy it takes all possible width.
here's html wrapping floating panel:
<div id="idA">
<div id="idB">
<!-- here I have panels and other divs -->
</div>
</div>
in CSS I have
#idA {
height: auto !important;
min-height: 100%;
}
#idB {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
}
In lack of a jsfiddle I've created one, based on the code that you've provided.
Within the jsfiddle, the panel works as expected in all browsers that I've tested with (including FF, Safari, Chrome, Opera).
I think your issue might be related to the fact that you haven't properly defined the jqueryui dialog close button in your jQuery template and a click on the title bar may have been misinterpreted as a click event on ".ui-dialog-titlebar-close".
In my jsfiddle I've defined:
<a class="ui-dialog-titlebar-close ui-corner-all" href="#" role="button">
<span class="ui-icon ui-icon-close"></span>
</a>
which might make the difference.
Here is the link to the jsfiddle.
Try appending first then calling draggable and resizable:
$panel.appendTo($container).resizable().draggable();
I had that once and the problem was that a parent div had the css property position: absolute. The effect was that the item was put on the bottom right screen corner the moment I started to drag it around. So first you thought it had disappeared but if you dragged it towards top-left it would come up.
I solved the problem by adding display: inline-block to float panel
<script id="tmpl-float-panel" type="text/x-jquery-tmpl">
<div style="display: inline-block" class="ui-widget ui-dialog ui-corner-all ui-widget-content float-panel no-select">
<div class="ui-dialog-titlebar ui-widget-header ui-helper-clearfix">
<span class="ui-dialog-title">${title}</span>
<a class="ui-dialog-titlebar-close ui-corner-all" href="#" role="button">
<span class="ui-icon"></span>
</a>
</div>
<div class="ui-dialog-content ui-widget-content">
</div>
</div>
</script>
Any ideas of more elegant solution?

using z-index in correct way

I want to create a simple slider like the one I ve shown in the pic.. I have two divs wrapper 1 and wrapper2 separated by a margin of 20px,
I have a button in wrapper 1 clicking on which a new div should come down sliding which should come in front of wrapper 1 and 2,
The code that Ive used is
<div id="wrapper1" style="width:960px; height:200px;z-index:100;">
<a href="#" class="clickMe">
<div id="tab1">
</div>
</a>
<div id="slider" style="width:400px; height:100px; z-index:999;">
</div>
</div>
<div id="wrapper2" style="width:960px; height:200px; z-index:100;">
</div>
and the script looks like
$(document).ready(function()
{
$("#slider").css({"display":"none"});
$(".clickMe").click(function()
{
$("#slider").slideDown("slow");
}
);
});
With this code, what I get is the slider window comes sliding down by pushing wrapper2 downwards instead of coming in front.what could be the issue?
I've put a fiddle together.
Here is the relevant code:
HTML
<div id="wrapper1">
<div class="clickMeWrapper">
<a class="clickMe" id="tab1" href="#">Click Me!</a>
<div class="slider">
</div>
</div>
<div class="clickMeWrapper">
<a class="clickMe" id="tab1" href="#">Click Me!
</a>
<div class="slider">
</div>
</div>
</div>
<div id="wrapper2">
</div>​
jQuery
$(document).ready(function() {
$(".slider").hide();
$(".clickMeWrapper").click(function(e) {
e.preventDefault();
e.stopImmediatePropagation();
$(this).children(".slider").slideToggle("slow");
});
});​
If something's not clear, please let me know.
I think you should add position:absolute; to "slider", and set its position.
You have to put your slider outside the wrapper elements otherwise the parent child relationship overrides some formatting rules like z-index. position:absolute and other css attributes should be set by jQuery automatically.
You need an absolute position for z-index to work.

Categories