0

Currently trying to display Bootstrap tooltips through a json file in Vue.js. My JSON files hold all of the content that should be displayed on a particular component but it isn't initializing Bootstrap. If I simply just copy and paste the Bootstrap 4 tooltip demo to a component like

<button type="button" class="btn btn-secondary" data-toggle="tooltip" 
data-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
    Tooltip with HTML
</button>

What I have above displays perfectly fine with the Bootstrap tooltip being initialized but if I have it displayed in my JSON file such as

{
    "text":"Modern vehicles are made up of many different parts. Learning how these parts work together may seem challenging. However, maintaining and operating your car economically and safely is not as difficult as you think.<br><a href=\"{0}California.htm#CONSTRUCTION\" target=\"_blank\" data-toggle=\"tooltip\" data-placement=\"bottom\" title=\"Tooltip on bottom\">Read more</a> about vehicle’s basic parts and components and how they work together.",
    "text_type":"paragraph"
}

The button displays fine but the tooltip is being displayed - at least not the Bootstrap version of it. Any clues?

Relevant code:

<template>
<div>                
    <p v-if="hasSubTitle" v-html="slideData.subtitle" class='subtitle'></p>

    <p v-html="slideData.text" class='text-paragraph'></p>

    <div v-if="hasImage" >
        <img v-if="hasImage" :src="playerConfig.GraphicPath + slideData.graphic" class="img-fluid" /> 
    </div>

    <div class='media-div' v-if="hasVideo">
        <videoPlayer 
            ref="videoPlayer"             
            :url="playerConfig.StreamingHTTPSLecture + slideData.graphic"
            :posterUrl ="playerConfig.PosterPath"

             v-on:videoEnded="onVideoEnded" 
             v-on:videoTimeUpdate="onVideoTimeUpdate"
        ></videoPlayer>             
    </div>

</div>  
</template>

The relevant property "text" inside of the JSON posted above is being rendered through 

<p v-html="slideData.text" class="text-paragraph'></p>
Improve this question
5
  • Are you using Bootstrap Vue or are you just trying to use both Bootstrap and Vue? Dynamic behaviors in Bootstrap are not going to play well with Vue unless you handle them in the Vue lifecycle hooks. Commented Aug 1, 2018 at 21:13
  • @RoyJ using Bootstrap AND Vue. I was using Bootstrap Vue in the beginning but it's a pretty large code base to only use tooltips. How would I go about them using lifecycle hooks? I initialized all tooltips in Mounted() after we pull dynamic data using $nexTick but still same issue. Commented Aug 1, 2018 at 21:24
  • Can you post any relevant code like your Vue Component etc? Commented Aug 1, 2018 at 21:52
  • @WildBeard updated description above! Commented Aug 1, 2018 at 22:04
  • stackoverflow.com/a/49695544/392102 Commented Aug 1, 2018 at 22:38
Related questions
41
How can add bootstrap tooltip inside Vue.js
2
Add or remove tooltip in Vuejs using Bootsrap vue
3
How to v-for Bootstrap vue tooltips
Load 7 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.