I'm trying to use an Bootstrap tool tip in a bootstrap table. More or less it works as it should. But i can get it to show the small arrow at the bottom. I have no problems getting it to work outside an table.
<div class="imgtooltip displayInLineBlock" data-toggle="tooltip" data-placement="top" title="" data-original-title="History">
<a class="breakDownListShowEquipLongText " href="#" data-notificationid="5000">
<img class="vcenter marginTopMinus2 displayInLineBlock" src="/api/Icon/GetIcon/?size=15&iconkeyname=MMS_ViewLog" alt="MMS"></a></div>
$('a[data-toggle="tooltip"]').tooltip({
animated: 'fade',
placement: 'top',
});
.cart {
overflow:hidden;
margin-top:20px;
padding:10px 20px;
background: yellow;
}
<div class="cart">
<a data-toggle="tooltip" title="add to cart">
<i class="icon-shopping-cart"></i>
</a>
</div>
Demo : JSFiddle
Update:
You can change placement to top,bottom,right,left
Related
I am trying to create social media icons using svg files in a footer. If I use inline css, it works. If I don't, it does not show. I am using styled-components package.
Any idea how can I get it to work without inline css?
This works:
<div style={{ width: '25px', margin: '0 5px' }}>
<a href={link}>
<img src={iconName} alt={(iconName, 'icon')} />
</a>
</div>
This does NOT work:
const iconSocial = styled.div`
width: 25px;
margin: 0 5px;
`;
<iconSocial>
<a href={link}>
<img src={iconName} alt={(iconName, 'icon')} />
</a>
</iconSocial>
This also does NOT work:
<div>
<a href={link}>
<img src={iconName} alt={(iconName, 'icon')} />
</a>
</div>
if you want show image between a tag then we have two option first one our custom image (also you need to write some css to its styling) and second is using fa icon you can use any method according to your requirement.
<a href="">
<img src="https://static.vecteezy.com/system/resources/thumbnails/001/993/889/small/beautiful-latin-woman-avatar-character-icon-free-vector.jpg" alt="" srcset=""> Profile
</a>
<hr>
<i class="fa fa-facebook-square" aria-hidden="true"></i>Facebook
<i class="fa fa-twitter" aria-hidden="true"></i> Twitter
<i class="fa fa-linkedin" aria-hidden="true">Linkdin</i>
.svg-img{
width: 100px;
height: 100px
}
<div>
<a href="">
<img class="svg-img" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0xNC44NTEgMTEuOTIzYy0uMTc5LS42NDEtLjUyMS0xLjI0Ni0xLjAyNS0xLjc0OS0xLjU2Mi0xLjU2Mi00LjA5NS0xLjU2My01LjY1NyAwbC00Ljk5OCA0Ljk5OGMtMS41NjIgMS41NjMtMS41NjMgNC4wOTUgMCA1LjY1NyAxLjU2MiAxLjU2MyA0LjA5NiAxLjU2MSA1LjY1NiAwbDMuODQyLTMuODQxLjMzMy4wMDljLjQwNCAwIC44MDItLjA0IDEuMTg5LS4xMTdsLTQuNjU3IDQuNjU2Yy0uOTc1Ljk3Ni0yLjI1NSAxLjQ2NC0zLjUzNSAxLjQ2NC0xLjI4IDAtMi41Ni0uNDg4LTMuNTM1LTEuNDY0LTEuOTUyLTEuOTUxLTEuOTUyLTUuMTIgMC03LjA3MWw0Ljk5OC00Ljk5OGMuOTc1LS45NzYgMi4yNTYtMS40NjQgMy41MzYtMS40NjQgMS4yNzkgMCAyLjU2LjQ4OCAzLjUzNSAxLjQ2NC40OTMuNDkzLjg2MSAxLjA2MyAxLjEwNSAxLjY3MmwtLjc4Ny43ODR6bS01LjcwMy4xNDdjLjE3OC42NDMuNTIxIDEuMjUgMS4wMjYgMS43NTYgMS41NjIgMS41NjMgNC4wOTYgMS41NjEgNS42NTYgMGw0Ljk5OS00Ljk5OGMxLjU2My0xLjU2MiAxLjU2My00LjA5NSAwLTUuNjU3LTEuNTYyLTEuNTYyLTQuMDk1LTEuNTYzLTUuNjU3IDBsLTMuODQxIDMuODQxLS4zMzMtLjAwOWMtLjQwNCAwLS44MDIuMDQtMS4xODkuMTE3bDQuNjU2LTQuNjU2Yy45NzUtLjk3NiAyLjI1Ni0xLjQ2NCAzLjUzNi0xLjQ2NCAxLjI3OSAwIDIuNTYuNDg4IDMuNTM1IDEuNDY0IDEuOTUxIDEuOTUxIDEuOTUxIDUuMTE5IDAgNy4wNzFsLTQuOTk5IDQuOTk4Yy0uOTc1Ljk3Ni0yLjI1NSAxLjQ2NC0zLjUzNSAxLjQ2NC0xLjI4IDAtMi41Ni0uNDg4LTMuNTM1LTEuNDY0LS40OTQtLjQ5NS0uODYzLTEuMDY3LTEuMTA3LTEuNjc4bC43ODgtLjc4NXoiLz48L3N2Zz4=">
</a>
</div>
I have 3 elements that are displayed when hovering on the img element.
the problem is that when I hover over the icons, hovering over image disrupts and icons start flashing.(hovering happens back and forth between image and icon)
I know that I can add some class like this:
.dark-shield {
pointer-events: none;
}
to icons, and it fixes it but then I wont be able to apply the click event.
I appreciate if someone can help.
here is my code for display bellow:
.invisible {
visibility: hidden;
}
<div class="container transition-3d-hover ">
<a href="{% url "gallery-post" post.id %}">
<img id="{{ post.id }}" class="rounded "
src="{{ post.photo.url }}"
onmouseenter="f(this)"
onmouseleave="f(this)"
>
</a>
<i id="complain-icon-{{ post.id }}"
class=" fas fa-angry complain-box invisible icon-big dark-shield"></i>
<i id="fav-icon-{{ post.id }}"
class=" fa fa-hand-point-up like-box invisible icon-big "></i>
<i id="score-icon-{{ post.id }}"
class=" fas fa-heart fav-box invisible icon-big "></i>
</div>
<script>
function f(e) {
var complain = "#" + "complain-icon-" + e.id
var fav = "#" + "fav-icon-" + e.id
var score = "#" + "score-icon-" + e.id
$(complain).toggleClass('invisible')
$(fav).toggleClass('invisible')
$(score).toggleClass('invisible')
}
</script>
In your code, as you can see, the icons are not a part of the image. So, the icons become invisible when you hover them. After they are invisible, you hover over the image again, and the icon becomes visible. This keeps repeating. So, here is a code snippet that would solve this issue:
.img1 {
width: 100%;
height: 100%;
}
.icon {
color: white;
font-size: 30px;
position: absolute;
top: 40%;
left: 40%;
display: none;
}
#wrapper {
float: left;
width: 50%;
height: 30%;
cursor: pointer;
}
#wrapper:hover .icon {
display: block;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<body>
<div id="wrapper">
<img src="https://cdn.mos.cms.futurecdn.net/wtqqnkYDYi2ifsWZVW2MT4-1200-80.jpg" class="img1">
<i class="fas fa-angry icon"></i>
<i class="fa fa-hand-point-up icon" style="top: 20%;"></i>
<i class="fas fa-heart icon" style="left: 10%; top: 20%;"></i>
</div>
</body>
</html>
Please note: This code might not work in the snippet, but it would work if you create a new file with this code.
Code explained
As I have already explained, the icons are not a part of the image. So, when you hover them, they become invisible. However, in my code, I have inserted the images, as well as the icons inside one div. Now, whenever you hover the div, the icons are visible. Since the icons are a part of the same div, they would remain visible.
I have an application that list's some content on page dynamically. So we choose some achievement, and create a section that have from 1 to X achievements and on this page, they're listed using col-md-x.
I want to use the col-md-6 size, because I have some elements that's dynamic and I need some space to show it.
But my problem here is, I want to make the columns to use the empty space, for example this image:
The red area, below section 'informe um nome2' isn't occupied, but I want to show the third, 'informe um nome3' below this section and use the free space.
Here's my current code:
<div class="row col-md-12">
#foreach (var item in Model)
{
<div class="col-md-6" style="margin-bottom:20px">
<div class="card">
#if (item.SectionHeader != null)
{
<div class="card-header text-center" style="height: 120px; background-image: url('#item.SectionHeader.ImageURL'); background-size:cover; color:black">
#item.SectionName <a title="Renomear" ng-click="Rename(#item.SectionID)"><i class="fa fa-xs fa-clipboard" style="cursor:pointer"></i></a> <a title="Baixar arquivo da seção" ng-click="DownloadFiles(#item.SectionID, false)"><i class="fa fa-xs fa-download" style="cursor:pointer; color:green"></i></a> <a title="Apagar seção" ng-click="Delete(#item.SectionID)"><i class="fa fa-xs fa-trash" style="cursor:pointer; color:red"></i></a>
</div>
}
else
{
<div class="card-header text-center">
#item.SectionName <a title="Editar" href="#Url.Action("EditSection", "Guides", new { sectionID = item.SectionID })"><i class="fa fa-xs fa-edit" style="cursor:pointer; color:orange"></i></a> <a title="Renomear" ng-click="Rename(#item.SectionID)"><i class="fa fa-xs fa-clipboard" style="cursor:pointer"></i></a> <a title="Baixar arquivo da seção" ng-click="DownloadFiles(#item.SectionID, false)"><i class="fa fa-xs fa-download" style="cursor:pointer; color:green"></i></a> <a title="Apagar seção" ng-click="Delete(#item.SectionID)"><i class="fa fa-xs fa-trash" style="cursor:pointer; color:red"></i></a>
</div>
}
<div class="card-body">
#foreach (var chievo in item.GameAchievements.OrderBy(f => f.SectionOrder.HasValue ? f.SectionOrder : f.AchievementID))
{
<div class="achievement" id="#chievo.AchievementID" style="margin-top:10px; margin-bottom:10px; z-index:1; height:60px">
<ul style="list-style:none; margin-top:20px; padding-left:0px" id="#chievo.AchievementID">
<img src="#chievo.Icon" style="float:left" />
<b> #chievo.DisplayName</b>
<br />
#if (string.IsNullOrEmpty(chievo.Description))
{
<i class="fa fa-edit" style="cursor:pointer" ng-click="OpenModal(#chievo.AchievementID)"></i>
}
else
{
<i>#chievo.Description</i>
}
<div style="float:right" class="text-center">
<a title="Alterar Dificuldade" ng-click="ChangeDifficulty(#chievo.AchievementID)"><i class="fa fa-xs fa-star" style="cursor:pointer; margin-left:10px; color:orange"></i></a>
<a title="Remover da Seção" ng-click="RemoveFromSection(#chievo.AchievementID)"><i class="fa fa-xs fa-trash-alt" style="cursor:pointer; margin-left:10px; color:red"></i></a>
</div>
#if (chievo.Difficulty != null)
{
<img src="#chievo.Difficulty.DifficultyImage" style="float:right; width:32px" />
}
</ul>
</div>
if (item.SectionDivisor != null && (item.IndividualDivisor.HasValue && item.IndividualDivisor.Value == true))
{
<div class="text-center">
<img src="#item.SectionDivisor.DivisorImageURL" />
</div>
}
}
#if (item.SectionDivisor != null && (item.IndividualDivisor.HasValue && item.IndividualDivisor.Value == false))
{
<div class="text-center" style="margin-top:20px">
<img src="#item.SectionDivisor.DivisorImageURL" />
</div>
}
</div>
</div>
</div>
}
</div>
So, basically, I want help making the columns auto-align and auto-fill.
I'm using sb admin 2 free template version.
In this case that won't work as desired, because the elements follow a row column distribution and when two elements fill a row, the next element goes all the way down to the space the longest element of the first two occupies and starts there.
What you could use in this case is something like Isotope using the horizontal masonry layout. You can check more on this on Isotope's docs.
If you still prefer to use the bootstrap option I would recommend you define a height for each column and make it scrollable. That would be the easiest way to order them visually.
I have html code:
<div class="btn-header transparent pull-right">
<span>
<a (click)="userInfo()" class="dropdown-toggle no-margin userdropdown">
{{ userAccount()?.given_name }}
<img src="assets/img/avatars/male.png" />
</a>
</span>
</div>
So what this basically does is show users name and picture next to his name. Currently the picture is too big and when I try to resize it by adding style="height: 33px" in img tag, the users name also resizes but I only want to resize picture.
The css classes are built in from component we use so I can't show them.
This should work fine. put this in your CSS declarations.
a img {
/*
CSS styles here
*/
}
Just add your style="height: 33px;" on the img tag itself. That said, it is often preferable to add the CSS to a class, and add the class to the img tag.
You can add width and height directly in img tag
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="btn-header transparent pull-right">
<span>
<a (click)="userInfo()" class="dropdown-toggle no-margin userdropdown">
{{ userAccount()?.given_name }}
<img src="assets/img/avatars/male.png" width="33" height="33" />
</a>
</span>
</div>
You can simply create a new class for img only like this:
<style>
img.Employee{
height:33px;
vertical-align:middle;
}
</style>
<div class="btn-header transparent pull-right">
<span>
<a (click)="userInfo()" class="dropdown-toggle no-margin userdropdown">
{{ userAccount()?.given_name }}
<img class="Employee" src="assets/img/avatars/male.png" alt="image" />
</a>
</span>
</div>
I'm using the default CSS that came with bootstrap; also using the bootstrap theme and dashboard CSS.
By default, when on xs devices, the sidebar disappears. Well, this is what i'm using for all my application's main navigation. So, I'd like for it to switch to a horizontal layout on such devices, but I can't find anything online about how to do this.
I scoured the documentation, but it's pretty lousy IMO. There should be a breakdown of all the classes and their uses. I imagine there's a class i can add that will do what I want.
Does anyone know it?
Here's the html:
<div class="container-fluid">
<div class="row">
<div class="col-sm-1 col-md-1 col-lg-1 overflow-fix">
<ul class="nav nav-sidebar">
<li class="icon-center">
</i>
</li>
<li class="icon-center">
<i class="fa fa-users fa-2x" data-toggle="tooltip" data-placement="right" title="Users"></i>
</li>
<li class="icon-center">
<i class="fa fa-building-o fa-2x" data-toggle="tooltip" data-placement="right" title="Accounts"></i>
</li>
<li class="icon-center">
<i class="fa fa-sitemap fa-2x" data-toggle="tooltip" data-placement="right" title="Branches"></i>
</li>
</ul>
</div>
</div>
</div>
Turns out the .css files actually have pretty good comments so I was able to see that .sidebar class had display:none; on it. Then found the media query right under it which gets activated when on larger view ports.
Added the below to my overriding css file, and now it changes to horizontal centered menu when on small screens, then pops back to the sidebar on large screens.
.sidebar {
display:block;
border-bottom: 1px solid #eee;
}
.sidebar ul {
text-align:center;
margin-bottom:0px;
}
.sidebar ul li{
display:inline-block;
}
#media (min-width: 768px) {
.sidebar ul li{
display:block;
}
}
I'm quite new to messing with CSS, so if anyone has a suggestion for how better to format the above code, please don't hesitate to share!
The sidebar has display: none by default. This can be overriden by
.sidebar
{
display:block;
background-color: #f5f5f5;
border-right: 1px solid #eee;
}