Is it possible to add html inside a title attribute? - javascript

Is there a way to put actual html code inside a title attribute on a table row element? My goal is to pop-up not only text but some info-graphics along with it, so a mouseover event thats not a modal would be great. Am I going in the wrong direction?
This table is already using jquery datatables but I don't believe it can do that sort of event.
<tr title='This activity will be open to registration on April 31st' >
.....
</tr>

Nope. You'd need to create your own title substitute with JavaScript.

No.
HTML can't be placed in an attribute.
If the goal is to have a pop-up with rich content, then you need to handle this via javascript. In addition, from an accessibility standpoint, you likely don't want to put that amount of content into the title attribute anyways, so going the JS route is going to solve a few problems for you. Google 'JS Tooltip' for dozens of options.

Native tooltips do not use HTML. jQuery UI tooltips would be very useful here.
Demo: http://jqueryui.com/tooltip/
EDIT: You would need to use the content option to use markup instead of the title attribute.
$(".text")
.tooltip({ content: '<b style="color: red">Tooltip</b> <i>text</i>' });
Here's a Fiddle demonstrating this: http://jsfiddle.net/acbabis/64Q2m/

You can use jquery ui tooltip plugin for showing custom title

There is no direct way to render HTML code written inside a tooltip. However, if you are using jQueryUI (or, if you can) then the code below will show the HTML effect (render) and not the HTML code in the tooltip.
Requirements: jQuery, jQueryUI.js, jQueryUI.css
HTML Code:
<tr data-title='This activity will be open to registration on <b>April 31st</b>'>.....</tr>
JavaScript:
$(function() {
$( document ).tooltip({
items: '[title], [data-title]',
track:true,
content: function(){
var element = $( this );
if ( element.is( "[title]" ) ) {
return element.attr( "title" );
}
if ( element.is( "[data-title]" ) ) {
return element.attr( "data-title" );
}
}
});
});

Instead of focusing on the title attribute, enclose a popup message with tags inside the target <td></td> (table data element). Then put a class in that td to control the div with CSS, hiding it first, then making its contents visible when the mouse hovers over the specific table data element. Something like this:
<tr><td class="info-tooltip">This activity will be open to registration on April 31st <div>[ *the contents you would want to popup here* ]</div></td></tr>
Your CSS then might be something like:
td.info-tooltip div {
display:none;
}
td.info-tooltip:hover {
position:relative;
cursor:pointer;
}
td.info-tooltip:hover div {
position:absolute; /* this will let you align the popup with flexibility */
top: 0px; /* change this depending on how far from the top you want it to align */
left: 0px; /* change this depending on how far from the left you want it align */
display:block;
width: 500px; /* give this your own width */
}

Using Bootstrap Tooltips one can do the following
<span title="Some <b>bold words</b>" data-toggle='tooltip' data-html='true'>this has an html supported tooltip</span>
for me it happens automatically but you might need to trigger it with javascript.
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
docs

I think a good option is to put that content inside a data attribute, something like this:
<div data-tooltip="Some information I want to show">
Actual content
</div>
And then, write a simple jQuery plugin that shows that content inside an element upon hover over.

Related

Hide Div if other Div has HTML "hidden" attribute in it

I'm really new to Jquery, JavaScript, Html
In our WordPress shop, there's an alert message that only appears if the user is below his set "Order Minimum Total".
i've looked in the source code and i saw that when the message is not visible on the page, the DIV "wcc-validation" has "hidden" added in its Class.
That's a copy of the code <div class="wcc-validation hidden" id="wcc-validation">
What we need is for our SideCart button to be set "display:none", whenever wcc-validation message appears on the screen (doesn't have the Class attribute of "hidden")
Whenever wcc-validation message disappears and gets the Class Attribute "Hidden" - make the SideCart button appear on the screen. (display:block?)
I've researched a bit and realized this cant be done with CSS,
I dont mind adding JS/Jquery snippets to make it work, but couldn't figure out how to spot a DIV that has a "hidden" Class attribute in it - and apply the show/hide on the sidecart button from that.
thanks a lot.
adam
you can check for the class 'hidden' if it is available for the 'wcc-validation', Like the following snippet:
jQuery(document).ready(function($){
if($('#wcc-validation').hasClass('hidden')){
$('.to_hide').hide();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wcc-validation hidden" id="wcc-validation">
<div class="to_hide">to hide based on hidden class</div>
You can check the value like this.
function checkValue(){
let ele = document.getElementById('wcc-validation')
if (ele.value) {
do what you want. change css, style etc
}
}

Bootstrap popover only one time for multiple positions

I have a table on my website. I would like to give the user the possibility to easily add comments to each of the row.
For that i found a nice looking comment view on the internet.
here is an example:
<div class="popover-markup">
Popover link
<div class="content hide">
code
</div>
</div>
$('.popover-markup>.trigger').popover({
html: true,
title: function() {
return $(this).parent().find('.head').html();
},
content: function() {
return $(this).parent().find('.content').html();
}
});
http://jsfiddle.net/dzr521qs/424/
This is basically exactly what i would like to have. But... I need a form inside of the comment view to post data to my server. And since i have around 50-300 Entries in the table, it would generate a ton of code if i have to place the code for the popover for every single row.
so my question is:
is it possible to define the popover once and show always the same popover but with different content for every row?
I would like to have a small icon on every row whith which i can open the popover and give over an id to the popover to load dynamic content.
hope someone have an idea.
thanks
You can add additional attribute to your popover link (say data-target) that will point to an element you want to display as content.
You can extract data attribute value inside content() callback and use it to display different content.
Example:
// inside popover(...)
content: function() {
var contentSelector = $(this).data("target");
if (contentSelector && $(contentSelector).length > 0) {
return $(contentSelector).html();
} else {
return "<div class='alert alert-warning'>Please specify data-target attribute pointing to element in page</div>";
}
}
// in your trigger add `data-target` attribute
<a ... data-target=".content">...
Here's an updated fiddle demonstrating that solution

Issue with handling a form using javascript

We have a website hosted at hubspot, we use their native WYSIWYG to design layouts then style them with css and js.
On the homepage http://www.lspatents.com/ it used to have a form under the "Get started here" title, it had around 10 questions, and used javascript to split them to steps so they can fit in the same area on the currently shown blank box.
It was working just fine till two days ago the form disappeared and left it with a blank area as you can see now, and as far as i know no one has touched this code recently.
Here is the js code that was used to manipulate the form
// Hero Form
$(window).load(function() {
// disable autocomplete to fix bug
$('.hero-form form').attr("autocomplete", "off");
$('.hero-form .hs-richtext').each(function() {
$(this).nextUntil('.hs-richtext').wrapAll('<div class="step" />');
});
// Hide Loading icon
$('.hero-form form').css('background', 'none');
$('.hero-form form .step:nth-of-type(2)').show();
// First Step to Second Step
$('.step').find('.hs-richtext').change(function() {
$('.step:nth-of-type(2)').hide().next().next().fadeIn();
});
// Second Step to Third Step
$('.step').find('.hs-input').change(function() {
var names = {};
$(':radio').each(function() {
names[$(this).attr('name')] = true;
});
var count = 0;
$.each(names, function() {
count++;
});
if ($(':radio:checked').length === count) {
$('.step:nth-of-type(4)').hide().next().next().fadeIn();
}
});
});
As far as i was able to tell, the developer used css to hide the whole form area with display:none; and used the js above to split the questions to steps and show a certain number in each step.
You can see the code being called in the footer so there is no problem with the link to the .js file, also if you inspect the element and disable the display:none; that's declared for any of the divs within the hero-form all questions get displayed, so there is no problem with the form either, so why has it stopped working?
Would appreciate any help,
This line will no longer work with your mark-up...
$('.hero-form form .step:nth-of-type(2)').show();
There are a number of additional divs that wrap your mark-up, placed there by react, React has placed a series of div inside your form which are being hidden by your existing CSS (which I assume used to just be a series of STEP's)
The CSS that hides the nodes is :
.hero-form form>div, .hero-form form>.step {
display: none;
}
The nodes that are being hidden with display:none
<div data-reactid=".0.0:$1">
<div class="hs-richtext" data-reactid=".0.0:$1.0">
<hr>
</div>
<div class="step">
<div class="hs_patent field hs-form-field" data-reactid=".0.0:$1.$patent">
<label placeholder="Enter your Do you have a patent?" for="patent-9fc8dd30-a174-43bd-be4a-34bd3a00437e_2496" data-reactid=".0.0:$1.$patent.0">
<span data-reactid=".0.0:$1.$patent.0.0">Do you have a patent?</span>
<span class="hs-form-required" data-reactid=".0.0:$1.$patent.0.1">*</span>
</label>
<div class="hs-field-desc" style="display:none;" data-reactid=".0.0:$1.$patent.1">
</div>
</div>
Your JQuery will add display:block to the DIV with the class 'step' bit wont alter the parent DIV (inserted by React) which still prevents your node from being shown.
You need to alter you JQuery to call show() on the parent() that contains the "step" div you wish to show.
Please check your browser console ans see you have problem loading this form:
https://forms.hubspot.com/embed/v3/form/457238/9fc8dd30-a174-43bd-be4a-34bd3a00437e
and this is the error:
net::ERR_NAME_RESOLUTION_FAILED
It's better you change your DNS to something like 8.8.8.8 and see if the problem still exists or not.

on dom ready change html source using js

I'm stuck with tinymce align problem. When I align text content to image let say left content preview look ok but on rendering content I'm getting source like this
<p>
<img width="205" height="154" alt="" src="/Content/uploads/images/mypic.jpg" left;"="">
</p>
now I want to change this snippet left;"=" to align="left"using javascript so when user loads page and when js recognize snippet left;"=" to automatically change to valid align property align="left".
How to do that?
I haven't seen anything like this left;"=" generated automatically. I'm not sure why it is generated, but you can remove the left attribute and add align attribute to your image.
Better try like this,
$(document).ready(function(){
if($('img').attr("left")) {
$(this).removeAttr( 'left');
$(this).attr("align","left");
}
)};
When I test this, you end up with an empty left;" attribute on the image, so you can do this:
if ($('img').attr('left;"') !== undefined) {
$('img').attr('align', 'left');
}

How can I show an element that has display: none in a CSS rule?

I have a really simple external css stylesheet that has the following :
div.hideBox {
display:none;
}
So when the html page loads, the div with that class attribute 'hideBox' will not show on the page, which is what I want. But I the box to show/appear when a user clicks on a button on that same page. I tried to use the onclick event to do this, but the div won't show.
So for example, the code would be :
<script language="javascript">
function showmydiv() {
document.getElementById('mybox').style.display = "";
}
</script>
</head>
<body>
<div id="mybox" class="hideBox">
some output of text
</div>
<input type="button" name="ShowBox" value="Show Box" onclick="showmydiv()">
What's strange is that a setup similar to this works when I use visibility:hidden; position:absolute; and I can use a JavaScript function to show the <div>.
What am I doing wrong here?
Because setting the div's display style property to "" doesn't change anything in the CSS rule itself. That basically just creates an "empty," inline CSS rule, which has no effect beyond clearing the same property on that element.
You need to set it to something that has a value:
document.getElementById('mybox').style.display = "block";
What you're doing would work if you were replacing an inline style on the div, like this:
<div id="myBox" style="display: none;"></div>
document.getElementById('mybox').style.display = "";
document.getElementById('mybox').style.display = "block";
try setting the display to block in your javascript instead of a blank value.
I can see that you want to write you own short javascript for this, but have you considered to use Frameworks for HTML manipulation instead? jQuery is my prefered tool for such a task, eventhough its an overkill for your current question as it has SO many extra functionalities.
Have a look at jQuery here

Categories