I am using Bulma and cannot get the tooltip to work on a span, can anyone see what the issue is please?
<span class="favicons fa-layers fa-fw tooltip is-tooltip-bottom" data-tooltip="test">
<i class="fas fa-pound-sign"></i>
<span class="fas fa-caret-down" data-fa-transform="shrink-7 right-10"></span>
</span>
I am expecting to see a tooltip but am not
It seems you use bulma-tooltip extension.
Is extension correctly installed?
Take a look on the docs to see how to install and use it in your site:
https://wikiki.github.io/#installation
If you use webpack, you can add this extension with npm:
npm install bulma-tooltip
Related
I have a laravel project and I'm using Bootstrap 5 and the problem is tooltip is not working
I've tried many many ways that people suggested in Stackoverflow but none of them worked for me
Html:
<li class="mitem"> <i class="fas fa-home" aria-hidden="true"></i> </li>
JS:
require('./bootstrap')
require('../../node_modules/bootstrap/dist/js/bootstrap.bundle.min')
$(document).ready(function() {
$('[data-bs-toggle=tooltip]').tooltip();
});
Bootstrap version:
"bootstrap": "^5.1.3",
I even tried without -bs- but it didn't work neither
Bootstrap is loaded and everything is working except tooltip
I have installed components-font-awesome with bower for my rails application.
I successfully include the sass files,
#import "components-font-awesome/scss/fa-brands";
#import "components-font-awesome/scss/fontawesome";
Then when I am trying to add an icon to my page
<i class="fab fa-facebook-f" style="font-size: 48px;"></i>
it's not been displayed.
I am tracing the element on console and looks good.
It has a font-family:
Font Awesome 5 Brands';
and the right before content
content: "\f39e";
But still it's not displayed.
Include the class fa. It looks like you have used fab.
<i class="fa fa-facebook-f" style="font-size: 48px;"></i>
I've installed a Angular UI Bootstrap 2.5.0 package in my visual studio and I'm trying to perform a carousel operation, but it doesn't work at all. Following is my code.
<div class="panel-body" id="tblSubs" ng-controller="ControllerName">
<carousel interval="myInterval">
<slide ng-repeat="id in code">
<h3 class="text-center">{{id.Name}}</h3>
<p>{{id.Contact}}</p>
<p>{{id.Info}}</p>
</slide>
</carousel>
</div>
I'm able to get the data but the data doesn't come in carousel.
Any help would be appreciated.
Since version 0.14.0 you need to add the uib prefix to some of the directives, enter uib-carousel instead of carousel etc..
<div uib-carousel active="active" interval="myInterval" no-wrap="noWrapSlides">
<div uib-slide ng-repeat="slide in slides track by slide.id" index="slide.id">
<img ng-src="{{slide.image}}" style="margin:auto;">
<div class="carousel-caption">
<h4>Slide {{slide.id}}</h4>
<p>{{slide.text}}</p>
</div>
</div>
</div>
Am not able to click on links using Behat/Mink. There's a desired text in <span> tags so maybe this could be the reason?
This is part of my *.feature file:
Scenario: Tryin' to make it freakin' workin' yo!
Given I am on "/home/"
And I follow "Test"
Then I should be on "/test/"
And this is part of the page am trying to focus on:
<li id="ApplicationItem_test" class=" " data-placement="right" rel="popover" data-offset="-6" data-content="" data-original-title="test">
<a href="/app/tests/e76ee2a8d9094e11b6bb9c928c5d61e3/" data-subscription-id="e76ee2a8-d909-4e11-b6bb-9c928c5d61e3">
<i class="picon-money-icon-16"></i>
<span class="expand-element">test
</span>
<div id="nodeCounter_c592e0ce62c849fab427fc9f2a04b557" style="display:inline-block">
</div> </a>
</li>
<script type="text/javascript">
var node = { id: '#nodeCounter_c592e0ce62c849fab427fc9f2a04b557', action: '/app/tests/e76ee2a8d9094e11b6bb9c928c5d61e3/GetSidebarActionCount' };
Access.SideBar.nodesWithCounters.push(node);
</script>
And this is the error I'm getting:
And I follow "Test"
FeatureContext::clickLink()
Link with id|title|alt|text "Test" not found. (Behat\Mink\Exception\ElementNotFoundException)
Have tried all possible CSS selector functions found on the internet. Also am wondering if I shouldn't use the Selenium extension for Behat here (because of the JS?)
So answer is: I wasn't on the right page.
Basically Scenarios should be independent - that means my previous session was burnt and I missed some previous steps (login, for example.)
I am trying to implement addthisevent into my jqm application (1.4), but I have two issues.
The Link/Button doesn't appear. Looking with Firebug shows that the css class isn't loaded as hidden.
After manually activating the visibility using firebug, the link doesn't do anything.
Does anyone have experience with integrating addthisevent into a jqm app? Is there anything I have to be particularly careful of?
Many thanks in advance.
It appears that the jQM CSS interferes with AddThisEvent CSS. One solution is to add data-role="none" to the link which tells jQM to leave the link alone and not to enhance it.
<a href="#" data-role="none" title="Add to Calendar" class="addthisevent" rel="external">
Add to Calendar
<span class="_start">10-05-2014 11:38:46</span>
<span class="_end">11-05-2014 11:38:46</span>
<span class="_zonecode">38</span>
<span class="_summary">Summary of the event</span>
<span class="_description">Description of the event</span>
<span class="_location">Location of the event</span>
<span class="_organizer">Organizer</span>
<span class="_organizer_email">Organizer e-mail</span>
<span class="_facebook_event">http://www.facebook.com/events/160427380695693</span>
<span class="_all_day_event">true</span>
<span class="_date_format">DD/MM/YYYY</span>
</a>
Here is a DEMO