....
....
Some data
<span popover-placement="top" popover="content1, content2" popover-trigger="mouseenter">
<span class="fas fa-info-circle" style="font-size: 12px;"></span>
</span>
....
I want to change the content1 and content2 into two lines using <br>
I tried data-html="true", it doesn't work, I do believe, that's because it only works in the case like this -> data-toggle="popover" data-content="content1 <br> content2"
so is there any way to add in the first method? please make your suggestions and help me
If you are using Bootstrap's popovers, you are missing an element property to make the HTML popover work. Add this property data-html="true" to your span element with the tooltip and if it still doesn't render properly, run this on DOM ready:
$(function () {
$('[data-toggle="tooltip"]').tooltip();
})
Related
I have the following code successfully adapting the DOM (I can see the results by clicking View Source in the browser)--yet the DIV content it's supposed to hide isn't being hidden. What will hide it?
Dim cmsClearwayNode As HtmlNode = doc.DocumentNode.SelectSingleNode("//div[#id='clearway']")
cmsClearwayNode.SetAttributeValue("runat", "server")
cmsClearwayNode.SetAttributeValue("visible", "false")
Here's the markup. Note the visible attribute on the outer DIV:
<div class="icon-wrapper" id="clearway" runat="server" visible="false">
<a target="_blank" href="https://testclearway.com/">
<i class="fa fa-desktop custom-icon">
<span class="fix-editor"> </span>
</i>
<span class="hidden-xs">Connect via Clearway</span>
</a>
</div>
visible is not a valid HTML attribute.
If you are using HTML5, you can try hidden. One thing to note is hidden doesn't take true or false. You will need to remove hidden attribute if you want to show the element again, just assigning false to hidden won't show it.
<div class="icon-wrapper" id="clearway" runat="server" hidden>
<a target="_blank" href="https://testclearway.com/">
<i class="fa fa-desktop custom-icon">
<span class="fix-editor"> </span>
</i>
<span class="hidden-xs">Connect via Clearway</span>
</a>
</div>
Also, you can use CSS display: none; to hide it. If you want to reserve the space the element is taking, use visibility: hidden; instead. You can check the details about the comparison here.
The problem is that runat="server" is a hint that ASP.NET uses to id Server Side controls, and call the render methods.
You cannot set the runat server at runtime.
If you want to hide that element you have to whether add runat=serverat design time in clearway or hide the element client side. Adding a CSS class or a style (display:none, visibility:hidden)
Visible with upper case "V" is an attribute for asp.net controls not html controls, And runat="server does not change the html control to asp.net control even if you have added this befor runtime. Instead to hide your element you can set it's display style to none. Or you can add this css style to the page:
.hiddenDiv{
display: none;
}
And do this:
cmsClearwayNode.SetAttributeValue("class", "hiddenDiv")
So far the only good workaround I've found while trying to wrap up this code is setting cmsClearwayNode.InnerHtml = "". The node content drops off and everything else falls into place nicely. It's an OK solution, but I just thought setting attributes or styles would be more elegant.
Here's the best solution I've found for this issue after rummaging through several resources. I wouldn't consider it a workaround, but an actual solution. The problem we're trying to solve is hiding the DIV. Well, let's put an ASP panel around it, like pnlClear below:
<asp:Panel runat="server" ID="pnlClear">
<div class="icon-wrapper" id="clearway" runat="server" visible="false">
<a target="_blank" href="https://testclearway.com/">
<i class="fa fa-desktop custom-icon">
<span class="fix-editor"> </span>
</i>
<span class="hidden-xs">Connect via Clearway</span>
</a>
</div>
</asp:Panel>
Then in the code-behind, just say:
pnlClear.Visible = True
I have a View/View-Model pair that implements a popover custom attribute. My specific goals include dismissing the popover upon both button click within the popover itself, and from clicking anywhere else on the page.
I can get my doSomething() VM function to work on the element level in the view, but not within an attribute containing an element. I've explained the issue further in the code comments. I'd appreciate some guidance. Thanks!
blog.html
<template>
<require from="../popover/popover"></require>
...
<!-- doSomething() works here! -->
<button type='button' click.trigger='doSomething()'>ClickMe</button>
<!-- doSomething() does not work here! -->
<!-- `click.trigger`/`click.delegate` does not trigger anything, while `onclick` shows
"Uncaught ReferenceError: doSomething is not defined" -->
<span class="glyphicon glyphicon-star" popover="title.bind: blogpost.title; placement.bind: 'top'"
data-content='<button type="button" click.trigger="doSomething()">ClickMe</button>' ></span>
...
</template>
blog.ts
...
doSomething() {
console.log('doing something');
}
popover.ts
...
bind() {
$(this.element).popover({
title: this.title,
placement: this.placement,
content: this.content,
trigger: 'click',
html: true
});
}
I recently went through the same problem. I'm currently working on a Bootstrap port for Aurelia, it is not done yet, and I haven't written any documentation, but the popover is already implemented.
You are more than welcome to take a look:
https://github.com/tochoromero/aurelia-bootstrap/tree/master/src/popover
The way you are trying to implement the popover is going to be very complicated (if even possible), things are going to get messy with the scopes. If you only had text then it would be fine, but you basically want to be able to put anything in the popover and have it bound to the right View-Model.
The way I solved this was having a couple of Custom Elements that represent the popover, I have AubsCustomPopover, AubsPopoverTitle and AubsPopoverContent.
With this 3 custom elements you will create the bootstrap markup for the popover, and because you are adding them directly in the view they will have the right View-Model, and you can do whatever you want inside them.
And then, there is a custom attribute, this is AubsPopover, this is the one that will be in charge of showing and hiding the custom attribute depending on the trigger action you specify (hover, click, focus, outsideClick).
The code using it looks something like this:
<aubs-custom-popover model.bind="customPopover">
<aubs-popover-title>
This is my awesome title <i class="fa fa-star"></i>
</aubs-popover-title>
<aubs-popover-content>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" text.bind="password"
placeholder="Password">
</div>
<button class="btn btn-default" click.delegate="isOpen = false">
Close
</button>
</aubs-popover-content>
</aubs-custom-popover>
<button class="btn btn-primary"
aubs-popover="custom-model.bind: customPopover;
trigger: outsideClick;
position: bottom;
open.bind:isOpen">
Custom Popover
</button>
As I said the Popover is fully implemented but I haven't written any documentation, I want to have a couple of more components before I do that.
If you want to use it, I can give you some help setting it up.
I wanted to create Similar tooltip as shown in this fiddle
http://jsfiddle.net/Qv6L2/294/
(Please mouse over on the input fields to see the tooltip)
I was following the above fiddle and created my code as
<div class="kp-color-button">
<a id="bullishengulfing" rel="tooltip" data-toggle="tooltip" data-placement="bottom" title="This is bullishengulfing" class="candlespattern green-button">Bullish Engulfing</a>
<a id="dojiyestersay" rel="tooltip" data-placement="bottom" data-toggle="tooltip" title="This is dojiyestersay" class="candlespattern orange-button">Doji Yesterday</a>
<a id="hammer" rel="tooltip" data-placement="bottom" data-toggle="tooltip" title="This is hammer" class="candlespattern light-blue-button">Hammer Pattern</a>
<a id="bearishengulfing" data-placement="bottom" data-toggle="tooltip" rel="tooltip" title="This is bearishengulfing" class="candlespattern maroon-button">Bearish Engulfing</a>
</div>
and this is my fiddle
http://jsfiddle.net/7jf3E/31/
Could you please tell me how to create similar tooltip ??
The first fiddle uses a set of JS and CSS code to create tooltips.
In the code you are using in the second fiddle, the tooltips are based on the "title" HTML attribute and all the data-* stuff you added have no effect.
EDIT: to be more specific, a "title"-based tooltip is generated by the browser, like a tooltip in an application. It is not an HTML entity and thus cannot be styled.
It seems that you've copied/pasted these data attributes form some other code/page without knowing excatly what they are. Perhaps something using Bootstrap:
http://getbootstrap.com/javascript/#tooltips
Anyway, to answer your question, you cannot change the color for "title"-based tooltip.
But do not hesitate to check Bootstrap if you are starting a new website.
Best,
First add another div for the tooltip
<div id = "tooltip"></div>
then hide it with CSS
#tooltip {
display: none;
}
then use jQuery:
$(document).ready(function() {
$("#bullishengulfing").hover(function() {
$("#tooltip").show("slow");
$("#tooltip).text("the text for that category");
)}; // repeat this for every div
)};
hope this helps!
I want to change the content of a button when clicked - specifically I want it to change to a "block" state where it can't be clicked, while I want to give it a Glyphicon.
What I want added:
<span class="glyphicon glyphicon-saved" aria-hidden="true"></span>
and the text "Downloaded" - I wish for this to erase the previous text and Glyph icon, and I've found this little peace of jQuery that changed the text on click.
<script>
$(document).ready(function(){
$('#download-btn').click(function() {
$("#download-btn").text('Downloaded');
})
});
</script>
but it wouldn't allow me to add any HTML code, it just outputted it as pure text.
And last, I want to add the following style btn-block to the button.
This is the button before being clicked;
<button id="download-btn" type="button" class="center btn btn-primary">
<span class="glyphicon glyphicon-save" aria-hidden="true"></span> Download
</button>
After click, the jQuery above changed the text to "Downloaded", but I can't seem to figure out how I add style, and code, to a tag.
With jQuery:
You can change an elements html with .html()
You can change an elements styles with .css()
For changing classes, you can use .addClass() and .removeClass()
There are many more jQuery functions for DOM manipulation.
I'd suggest taking a look. jQuery API
Use .html() to apply/override HTML that is inside the element you are selecting.
You can disable buttons in a few ways. I used .attr() or you can use .prop().
$('#download-btn').click(function() {
$(this).html('<span class="glyphicon glyphicon-ok"></span> Downloaded').attr('disabled', true);
});
jsFiddle Example
My question is based on SO question Bootstrap tooltips not working
So, the solution is to use:
jQuery:
$("[rel='tooltip']").tooltip();
html:
test
And that works perfect.
My question is: what if I want to use a <span> tag instead of <a>.
Should it be <span rel="tooltip" title="A nice tooltip">Hover on me</span> ?
It works perfectly but I see the rel attribute is used for a tags.
So, what's the correct solution?
Your can write in the following ways :
Method 1
<a title="" data-placement="top" data-toggle="tooltip" href="#" data-original-title="Tooltip on top">Tooltip on top</a>
And Than initialize it with the following code :
$('a').tooltip();
The other way is to use classes or ids and initialize them one by one like :
Method 2
<span class="top" title="A nice tooltip" data-original-title="Tooltip on right">Hover on me</span>
<a class="top" title="" href="#" data-original-title="Tooltip on top">Tooltip on top</a>
Than initializing it with the following code :
$(".top").tooltip({
placement: "top"
});
Jsfiddle Method 1
Jsfiddle Method 2
If you don't want to use a rel attribute on a <span>, simply use something else like a class and update the tooltip selector, eg:
$("[rel='tooltip'], .tooltip").tooltip();
<span class="tooltip" title="A nice tooltip">Hover on me</span>
You can use any CSS selector inside the jQuery function $() to select any element on the page in any way.