How to show edit action icon when mouse-over on particular text - javascript

How to show / hide edit icon on mouseover and mouseout on particular text.
Here is my html code snippet
<ul>
<li>
<a id="pop" href="javascript:;;" data-content="test Desc" data-id="123">
<span class="testNameInfo">Test</span>
</a>
<div class="pull-right icons-align">
<i class="fa fa-pencil"></i>..
<i class="fa fa-plus"></i>
<i class="fa fa-times"></i>
</div>
</li>
</ul>
when page loads the fa-pencil icon is in hide state. When i mouse over on text, it should show fa-pencil icon. Remaining icons (add and delete) are always in show state.
Here is my javascript to hide the fa-pencil icon
$("a.editInline").css("display","none");
Am using backbone and marionette js frameworks, so i need to register the events in view.
Please let me know what is the best way to get out from my issue.

You can do as below:
$('.testNameInfo').on('mouseover mouseout',function(){
$(this).closest('li').find('.editInline').toggle();
//find the closest li and find its children with class editInLine and
//toggle its display using 'toggle()'
});
UPDATE
DEMO
#JamieBarker made his point which is valid here so I would suggest to try below code instead
$("a.editInline").css("display","none");
$('li').on('mouseover mouseout',function(){
$(this).find('.editInline').toggle();
//find its children with class .editInLine and
//toggle its display using 'toggle()'
});

Better to use CSS than JavaScript if you can:
a.editInline {
display:none;
}
li:hover a.editInline {
display:inline-block;
}

UPDATE
Performance/Simplicity wise I'd advise going with the CSS solution provided. If all else you can use then JS solution.
Optional CSS Solution
.editInline {
display: none;
}
#pop:hover .icons-align .editInline {
display: inline-block;
}
JS Solution
$(function() {
$(".editInline").hide(); // Use this if CSS is not wanted
$("#pop").hover(function() {
$(".editInline").show();
}, function() {
$(".editInline").hide();
});
});

Related

Show/hide multiple children classes for an individual parent click (Jquery)

I'm fairly new to Javascript/Jquery and I'm trying to hide multiple children/adjacent classes when a specific parent class is clicked.
Here's my HTML
<div class="container">
<div class="row">
<div class ="col-md-2 pov_icon">
<div class="pov_icon_small">
<i class="fa fa-clock-o"></i>
</div>
<div class="pov_title_small">
MEASURE
</div>
</div>
<div class ="col-md-2 pov_icon">
<div class="pov_icon_large">
<i class="fa fa-map-marker"></i>
</div>
<div class="pov_title_large">
MEASURE
</div>
</div>
<div class ="col-md-2 pov_icon">
<div class="pov_icon_small">
<i class="fa fa-commenting"></i>
</div>
<div class="pov_title_small">
MEASURE
</div>
</div>
</div>
</div>
What I'm aiming to do is: When a user clicks one of the two smaller icons shown (pov_icon_small), for that individual icon: the classes pov_icon_small and pov_title_small will change to pov_icon_large and pov_title_large respectively. In the same time, I want the other 'large' icon and 'title' to revert back to the 'small' state
I've started calling some Javascript but I don't think I'm headed the right way:
$('.pov_icon_small').on('click', function (e) {
$(this).toggleClass("pov_icon_large");
});
Would anyone be willing to point me to the right direction?
To use individual click
$('.pov_icon_small , .pov_icon_large').on('click', function (e) {
$('.pov_icon_large').not($(this)).removeClass('pov_icon_large').addClass('pov_icon_small');
$(this).toggleClass("pov_icon_small").toggleClass("pov_icon_large");
});
and for title the same way
$('.pov_title_small , .pov_title_large').on('click', function (e) {
$('.pov_title_large').not($(this)).removeClass('pov_title_large').addClass('pov_title_small');
$(this).toggleClass("pov_title_small").toggleClass("pov_title_large");
});
Working Demo
To run both action on icon click use this
$('.pov_icon_small , .pov_icon_large').on('click', function () {
$('.pov_icon_large').not($(this)).removeClass('pov_icon_large').addClass('pov_icon_small');
$('.pov_title_large').not($(this).next('div[class^="pov_title_"]')).removeClass('pov_title_large').addClass('pov_title_small');
$(this).toggleClass("pov_icon_small").toggleClass("pov_icon_large");
$(this).next('div[class^="pov_title_"]').toggleClass("pov_title_small").toggleClass("pov_title_large");
});
Working Demo
Note: be sure to include Jquery
You can add a common class icon for the icon div and title for the title div and following code will work,
$(".pov_icon_small").on('click',function(){
$(this).parent().siblings().children('div').each(function(value){
if($(this).hasClass('icon'))
$(this).addClass('pov_icon_small').removeClass('pov_icon_large');
else if($(this).hasClass('title'))
$(this).addClass('pov_title_small').removeClass('pov_title_large');
});
$(this).addClass('pov_icon_large').removeClass('pov_icon_small');
$(this).siblings('.title').addClass('pov_title_large').removeClass('pov_title_small');
});
Here as you can see, I am first getting parent of the icon clicked i.e. Your pav_icon div now I am changing for all the siblings now each div in the sibling. If it is Iicon changing icon classes as required if title changing title classes.

Remove and Add class is not working in jquery

What do I need:
I need to have something like "toggling of images" using the functions to add & remove classes in jquery.
JavaScript code
$('.hover12').click(function () {
$('.fa-star-o').removeClass('fa-star-o').addClass('fa-star orange12');
});
HTML code
<a href="javascript:void(0);" class="hover12">
<i class="fa fa-star-o favourate_dextop" title="Add to Favorites" id="fav13039" data-sess_id="13039" data-name="MAGIC" data-city="Las Vegas" data-country="United States Of America" data-event_url="magic"></i>
</a>
Problem:
On the first click, remove class works fine and add class to that particular class.
Then I have a problem on the second click, neither remove or add class works.
o/p on first toggle
<i class="fa favourate_dextop fa-star orange12" title="Add to Favorites" id="fav13039" data-sess_id="13039" data-name="MAGIC" data-city="Las Vegas" data-country="United States Of America" data-event_url="magic"></i>
The solution I found:
$('.hover12').click(function () {
$('.fa-star').removeClass('fa-star orange12').addClass('fa-star-o');
});
Change this
$('.fa-star-o').RemoveClass...
to this
$(this).find('i').RemoveClass...
try this:
$('.hover12').click(function()
{
$(this).find('.fa').toggleClass('fa-star-o').toggleClass('fa-star orange12');
});
The selector fails for .fa-star-o class the second time because there is no class like that since it was removed on the first click.
$('.hover12').click(function(e){
e.preventDefault();
if($('.hover12 i').hasClass('fa-star-o')){
$('.fa-star-o').removeClass('fa-star-o').addClass('fa-star orange12');
}else if($('.hover12 i').hasClass('fa-star'){
$('.fa-star-o').removeClass('fa-star orange12').addClass('fa-star-o');
}
});
This is one ugly solution though!

Refresh an element so its new tooltip shows (in jQuery/Javascript)

I have an html element which is using bootstrap tooltip to show a title when hovering over it. However, when you click this element I'm changing the tooltip, but the new tooltip isn't showing until I remove the mouse from it and re-hover over the element again.
I want the tooltip to be shown instantly when said button is clicked. How can I achieve this? Is there a way to "refresh", in lack of better words, an html element?
try this way
Demo :
http://jsfiddle.net/dreamweiver/9z404crn/
$(document).ready(function() {
$('#example').tooltip();
$('#example').on('click', function() {
$(this).attr('data-original-title', 'changed tooltip');
$('#example').tooltip();
$(this).mouseover();
});
});
h3 {
margin-top: 50px;
}
<h3>
Sensors Permissions
<i class="icon-info-sign" data-toggle="tooltip" title="first tooltip" id='example'></i>
</h3>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet" />
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
Note:
Above logic works only with Bootstrap version 2.3.2 and below, however, the solution provided by #NabiK.A.Z's would work with the latest versions of Bootstrap lib.
Happy Coding:)
You can use this code:
var newTooltip = 'Changed this tooltip!';
$('#example').attr('data-original-title', newTooltip).parent().find('.tooltip-inner').html(newTooltip);
I test it with bootstrap 3.3.4
You can see it here:
http://jsfiddle.net/NabiKAZ/a4WwQ/1029/
$('a[data-toggle="tooltip"]').tooltip({
animated: 'fade',
placement: 'bottom',
});
$('.mytooltip').hover(function() {
$('.mytooltip').tooltip('show');
});
$('.mytooltip').click(function() {
var newTooltip = 'Changed this tooltip!';
$(this).attr('data-original-title', newTooltip).parent().find('.tooltip-inner').html(newTooltip);
});
.cart {
overflow: hidden;
padding: 10px 3px;
background: yellow;
}
<div class="cart">
<a data-toggle="tooltip" title="add to cart" class="mytooltip">
<i class="icon-shopping-cart"></i>
</a>
</div>
<br>
<div>
<a data-toggle="tooltip" title="add to another cart" class="mytooltip">
<i class="icon-shopping-cart"></i>
</a>
</div>
<!-- Post Info -->
<div style='position:fixed;bottom:0;left:0;
background:lightgray;width:100%;'>
About this SO Question: <a href='http://stackoverflow.com/q/19630749/1366033'>How to make bootstrap 3 tooltip work with parent div with overflow:hidden?</a><br/> Find documentation: <a href='http://getbootstrap.com/javascript/#tooltips'>Bootstrap 3.0 ToolTips</a><br/> Fork This Skeleton Here <a href='http://jsfiddle.net/KyleMit/kcpma/'>Bootrsap 3.0 Skeleton</a><br/>
<div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
For me in bootstrap 4 this worked:
$("#xxx").tooltip("dispose").attr("title", "New Tooltip").tooltip()
It's 2021 and with Bootstrap 5(BS5) all answers on this here didn't help me. Most answers above updated the content of the $(element).parent().find('.tooltip-inner').html("This is a test"); generated by the tooltip plugin. However with BS5 the generated template for the tooltip has a unique ID which can be used to update the tooltip.
This example demonstrates a simple scenario: when the .copy_queue_id div is clicked, queue ID from its attribute is copied and hence the the tooltip is updated to notify the user
HTML Markup:
<div class="cursor-pointer text-primary copy_queue_id" data-queueid="123456" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Click to copy"> 123456</small>
JS - JQuery
$(document).on('click', '.copy_queue_id', function(){
let node = $(this);
let id = node.data('queueid');
navigator.clipboard.writeText(id);
let tooltipid = node.attr('aria-describedby');
$("#"+tooltipid).find('.tooltip-inner').html('ID Copied!!');
})
Tested & works in BS5
Hope this helps others :)
Sure you just have to change the tooltips text within the onclick event
$('.tooltip-inner').html("This is a test");
I've created a jsfiddle for you as a demonstration http://jsfiddle.net/a4WwQ/59/
Currently it will change all visible tooltips text which isnt really a problem since you arent going to show more than one at at a time. That being said, you should consider modifying the code to point to the closest tooltip.
hope it helps!
in case you are looking to refresh the contents;
$('#example').tooltipster('content', 'i am superman!');
2021, Bootstrap 5: update this property data-bs-original-title.
You can also use Razor / Blazor with this, like this:
var title = propExamples.FirstOrDefault(q => q.Key == selectedType.Id).Value;
<div class="col-sm-2">
<img class="zoom-on-hover cursor-pointer fit-image grayout"
src="/lib/bootstrap-icons-1.5.0/info-lg.svg"
data-bs-toggle="tooltip" data-placement="bottom"
data-bs-original-title="#title" />
</div>

Toolbar.js by Paul Kinzett Event handling

I'm wanting to use toolbar.js from http://paulkinzett.github.io/toolbar but even though I have the tool bar working the the handling of the events as documented I don't seem to be able to get identify which toolbar button/icon I clicked.
Below is the code snippit, which it pretty much lifted from the example site.
I'm no expert in JS, so if someone could enlighten me as to how to handle the toolbarItemClick event so that I can preform the correct action, that would be awesome.
Thanks
Lionel
<div id="user-options" class="toolbar-icons" style="display: none;">
<i class="icon-edit"></i>
<i class="icon-trash"></i>
</div>
<div class="tooltip-container normal">';
<section class="left">';
<div id="normal-button" class="settings-button"><img src="/3rdparty/paulkinzett-toolbar/documentation/img/icon-cog-small.png" /></div>';
</section>';
</div>
$('#normal-button').toolbar({content: '#user-options', position: 'top'});
$('#normal-button').on('toolbarItemClick',
function(event) {
console.log(event);
}
);
I was trying to figure out the same thing, eventually i deciphered the mechanism. A bit late to help you but maybe it will save someone else some time.
Firstly, I gave the button anchor tags IDs, though one could use data- attributes etc (note i am using img tags instead of the default glyph support)
<div id="user-toolbar-options">
<a id="menu-insert" href="#"><img src="add.png" width="18px" height="18px" /></a>
<a id="menu-remove" href="#"><img src="remove.png" width="18px" height="18px" /></a>
</div>
The key is to use a different function signature which isn't publicized in the documentation (function (event, buttonClicked){}, the 2nd parameter (buttonClicked) is the a element that was clicked on.
in the code below i also set targetBlock to the div that the button was in (as i have potentially dozens of articles and the button thats hows the toolbar appears on each) so i need to get the article in question to act on it.
$('#normal-button').on('toolbarItemClick',
function (event, buttonClicked) {
var targetBlock = $(event.target).parents('.article') // get article
var buttonClickedID = buttonClicked.id // get the id of the button click
switch (buttonClickedID) {
case 'menu-insert':
insertNewArticleBelow(targetBlock)
break;
case 'menu-remove':
removeArticle(targetBlock)
break;
}
}
$('#button').toolbar({
content: '#toolbar-options',
position: 'top',
style: 'primary',
event: 'click',
hideOnClick: true
});
$('#button').on('toolbarItemClick',
function( event,buttonClicked ) {
alert(buttonClicked.id);
}
);
<link href="https://paulkinzett.github.io/toolbar/css/documentation.css" rel="stylesheet"/>
<link href="https://paulkinzett.github.io/toolbar/css/jquery.toolbar.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://paulkinzett.github.io/toolbar/js/jquery.toolbar.min.js"></script>
<div id="toolbar-options" class="hidden">
<i class="fa fa-plane"></i>
<i class="fa fa-car"></i>
<i class="fa fa-bicycle"></i>
</div>
<div data-toolbar="toolbar-options" data-toolbar-animation="flip" class="btn-toolbar feature-toolbar btn-toolbar-primary text-center" data-toolbar-style="primary" id="button"><i class="fa fa-cog" style="position: relative"></i></div>

Styling javascript function *show/hide* CSS/HTML/JS

How would i style the read more and show less? ive tried styling #tag1 but this just alters the 'read more' text that first appears
Heres the JS
<script>
function toggleAndChangeText(divId, tagId) {
$("#"+divId).toggle();
if ($("#"+divId).css('display') == 'none') {
$('#'+tagId).html('Read More <i class="icon-circle-arrow-down"></i>');
}
else {
$('#'+tagId).html('Show Less <i class="icon-circle-arrow-up"></i>');
}
}
and the html
<a id="tag1" href="javascript:toggleAndChangeText('a1', 'tag1');">
<p>Read More <i class="icon-circle-arrow-down"></i></p> </a>
Here is what the text looks like during every section...
The first one is when you first see the button.
Then the user clicks on it and the 'Show Less' appears as you can see the button is further to the left and less padding on the bottom. when the user then goes to close the show less button, read more appears but stays in the same position as the show less.
My question is how would i go about styling the interactive read more/show less ones so they are in the position the first read more is? sorry if this is confusing!
Try :
$('#'+tagId).html('<p>Read More <i class="icon-circle-arrow-down"></i></p>');
I guess you have a padding or margin on your paragraphs
Actually, you're replacing
<a id="tag1" href="javascript:toggleAndChangeText('a1', 'tag1');">
<p>Read More <i class="icon-circle-arrow-down"></i></p> </a>
By
<a id="tag1" href="javascript:toggleAndChangeText('a1', 'tag1');">
Read More <i class="icon-circle-arrow-down"></i></a>
This will help you:
Style:
<style>
#open{
display: none;}
</style>
HTML:
<p id="open">Content goes here</p>
<span class="text"><strong>Read More</strong><img src="icon-show.png" /></span><span class="text" style="display:none;"><strong>Show less</strong><img src="icon-hide.png" /></span>
Javascript:
<script type="text/javascript">
$(document).ready(function() {
$('a#click1').click(function() {
$('p#open').slideToggle();
$('span.text').toggle();
return false;
});
});
</script>

Categories